- This topic is empty.
-
AuthorPosts
-
November 9, 2016 at 1:58 pm #247694
phi
ParticipantHello
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 >| HDMIHTML 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
| HDMIHow 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, MatthewNovember 10, 2016 at 3:05 pm #247753Manuel87
ParticipantAdding 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>
November 10, 2016 at 3:27 pm #247755Beverleyh
ParticipantWhy 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.
November 10, 2016 at 3:30 pm #247756Beverleyh
ParticipantP.S.
A live demo in CodePen (codepen.io) would also be more useful to us for troubleshooting than partial code snippets too.
November 13, 2016 at 6:26 am #247796phi
ParticipantI have found the solution thanks to Beverleyh, so thank you so much.
I removed all the displays and the solution is this simpletbody{
display:inline-block;
}Thanks again,
Phi -
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.