0

I have a datatable and within each cell of the last column I place a regular table. I need data to be displayed exactly in those tables, but I noticed if there's an extra space between two words it gets removed so that there's only 1 space character.

Turns out that is HTML behavior, and I found this solution along with a solution specific to Datatables.

However, when I apply white-space:pre; to datatable's <td> elements so the spaces wouldn't get removed, it breaks the CSS that I have on the tables: enter image description here

Compared to how it's supposed to look, as it looks before adding white-space:pre; to each cell: enter image description here

Here is the link to code with the recreated issue: https://jsfiddle.net/c4pjrs0L/4/

What is the cause of this? Specifically, the inner table not aligning at the top anymore and each button being displayed on a new line.

All I'm really trying to do is prevent html from trimming the extra spaces between words across the whole website.

Lukas
  • 1,699
  • 1
  • 16
  • 49

1 Answers1

2

Please read here how pre works: https://css-tricks.com/almanac/properties/w/whitespace/

I believe you missed the logic of it.

You have lines of code in your CODE, and those are respected with pre so when you put your buttons like this:

table td {
  white-space:pre;
}
<table>    
    <td>
      <input type="button" value="btn1">
      <input type="button" value="btn2">
      <input type="button" value="btn3">
    </td>
</table>

that will result in 3 separate lines rendered. And if you do this:

table td {
  white-space:pre;
}
<table>    
    <td><input type="button" value="btn1"><input type="button" value="btn2"><input type="button" value="btn3"></td>
</table>

they will all fit in one line.

Not sure what is your main problem because I don't see it on you fiddle but try using some other white-space property like nowrap (i tried that in your fiddle and I don't see any problems) or adjust the HTML as shown above.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

EDIT:

Now that I see what space you are referring to:

This is not how you add space between words in HTML. Use : &#160; or &nbsp; Or you need to tag your names and last names in span and add padding or margin.

https://jsfiddle.net/ikiK_Cro/eaL2gupn/7/

ikiK
  • 6,328
  • 4
  • 20
  • 40
  • Thanks for the response. I understand now why buttons displayed the way they did. If you'd have time to look at my question, I updated the first picture pointing out the other concern of there being an empty space above the inner table. But also the buttons are centered within the cell. I feel like `white-space: pre;` changes a lot I don't quite understand. I'll be taking a look at your links. – Lukas Apr 27 '21 at 13:11
  • @Lukas That space in your picture is cosed by `pre`. remove it in your fiddle and it will go op. – ikiK Apr 27 '21 at 13:15
  • I understand, but the problem is that if I don't use `pre`, the HTML will not display extra spaces between words. If you look at the HTML in the fiddle, you will see some table cells have words with more than one space between them. I want to keep those spaces in the data when the table is displayed. – Lukas Apr 27 '21 at 13:20
  • This is starting to make more sense to me thanks to your post. I'll get this sorted out in the actual app I'm working on. – Lukas Apr 27 '21 at 13:28