Request an Advice with Tables

[phi]

Hello
I’m working on a table about mobile parameters now, and i want it to look like this:

Connection | WIFI
< blank >| NFC
< blank >| USB
< blank >| HDMI

HTML code looks like this
. . .
<tr class=”telo”>
<th> Connection </th>
</tr>
<tr><td> USB </td></tr>
<tr><td> NFC </td></tr>
<tr><td> USB </td></tr>
<tr><td> HDMI </td></tr>

. . .
. . .

CSS code looks like this
.telo {
display:block;
height:40px;
width:85px;
float:left;
}
td {
display:inline-block;
}

. . .
. . .

My problem is this – first two or three rows are in line (with space from left), but another rows like USB, HDMI (or more) start at the very left of the line.

(like this)
Connection | WIFI
| NFC
| USB
| HDMI

How to fix it, please ? I have much more tables, so I’m searching for some “global” solution. I tried something with <th> height or <tr> height, but it didn’t work.
Don’t blame me, I am a beginner…
Any advice would be helpful.
Thanks, Matthew

[Manuel87]

Adding fixed widths will work:

<table>
  <tr>
    <td width="40px">Connection</td><td>|</td><td>WIFI</td>
  </tr>
  <tr>
   <td width="40px"></td><td>|</td><td>NFC</td>
  </tr>
  <tr>
   <td width="40px"></td><td>|</td><td>USB</td>
  </tr>
  <tr>
   <td width="40px"></td><td>|</td><td>HDMI</td>
  </tr>
</table>

[Beverleyh]

Why are you changing the display properties of the <tr> (to ‘block’) and the <td> (to ‘inline-block’)?

Table elements have their own default display properties which will be more predictable for you to work with.

If I were you, unless there’s a good reason for the change – maybe with the bigger picture that we’re unaware of – I’d take out the ‘display’ lines in the CSS (and the widths) and let the table elements revert back to their default behaviour.

Without inline-blocks screwing up the cell distributions, they’ll naturally fall into a more uniform-looking grid.

If this isn’t you’re intention, let us know what is, maybe with a simple diagram.

[Beverleyh]

P.S.

A live demo in CodePen (codepen.io) would also be more useful to us for troubleshooting than partial code snippets too.

[phi]

I have found the solution thanks to Beverleyh, so thank you so much.
I removed all the displays and the solution is this simple

tbody{
display:inline-block;
}

Thanks again,
Phi

[Author]

Posts