Yes, this is table-based layout. It's legacy so I may or may not be able to rip out the table, nonetheless I want to understand how table alignment works anyway, hence this arguably abhorrent question.
Say I have a 3x3 table with the values 1, 2, 3, ..., 8. It ends at 8, so the last row only has 2 elements in it. I want those centered.
HTML:
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td></tr>
</table>
I would like the CSS rule tr { text-align: center } to work, but I think there's some sort of table structure rule trumping what text align would do in this case, so some other style property maybe I have to cancel.
Fiddle, including a bunch of CSS that doesn't do what I want: http://jsfiddle.net/sdqtg7kr/
If you want those bottom td elements to respect text-align: center, you could change the display of the elements from table-cell to inline-block.
Updated Example
td {
border-color: red;
border-style: solid;
border-width: thin;
display: inline-block;
}
Related
I'm trying to create a table of empty cells on which I'm attaching Javascript to toggle a class, so I just need to give them a height and width. The problem is when I create the table, while it has padding, I can't get it to maintain it's height. I'm trying to avoid using as when I do, it creates the mouseover of highlighting text, and multiple clicks on the box can select the text.
Looking online, empty-cells: show; comes up as the constant answer, but it doesn't seem to keep the height. I've considered doing it as a series of inline-block divs, but then borders become messy, as the borders don't collapse.
I literally just have an empty table
<table style="border-collapse: collapse; empty-cells: show;">
<tr>
<td style="height: 1.3em; padding: 4px 6px;"></td>
<td style="height: 1.3em; padding: 4px 6px;"></td>
</tr>
</table>
I feel like this is an old HTML problem, and I'm missing some simple answer.
I had seen the question that was suggested as the duplicate, but as the answer there is 5 years old, I thought there must be something more modern for addressing this problem. If there isn't, I guess the visibility trick is the way to go.
Is there a specific minimum height that you want? If so, you can do something like this:
table tr td:first-child::after {
content: "";
display: inline-block;
vertical-align: top;
min-height: 60px;
}
Source code from omelniz originally posted here: Can I use a min-height for table, tr or td?
Try this
For <th> and <td> :
th:empty::before,td:empty::before{content:'\00a0';visibility:hidden}
For <td> only :
td:empty::before{content:'\00a0';visibility:hidden}
Description:
'\00a0' is code for single space
visibility:hidden to hide that single space
I have several tables and want to pad them differently. I've tried the following:
table#mapTable > tr > td{
padding-left: 4px;
padding-bottom: 20px !important;
}
for table with the id 'mapTable', but it hasn't been working (nothing happens). Same result, when trying 'margin-bottom' rather than 'padding-bottom'.
Is it possible to change <td> padding of only one table? I have a custom <td> style that I don't want to mess with for all the other tables.
For completeness, here's the table:
<table id='mapTable'>
<tr><td>stuff</td><td>stuff</td></tr>
<tr><td>info</td><td>info</td></tr>
</table>
Thanks!
You are selecting the tds wrong. Do not use > just use spaces.
Spaces find elements that are children of the previous listed element.
table#mapTable tr td{
padding-left: 4px;
padding-bottom: 20px !important;
}
<table id='mapTable'>
<tr><td>stuff</td><td>stuff</td></tr>
<tr><td>info</td><td>info</td></tr>
</table>
<table id='noStyle'>
<tr><td>stuff</td><td>stuff</td></tr>
<tr><td>info</td><td>info</td></tr>
</table>
There is no need to select table#mapTable tr td
It's enough to write
#mapTable td {
padding-left: 4px;
padding-bottom: 20px !important;
}
(= all <td> elements inside id "mapTable")
You got an answer already, just some more explanation:
table > tr won’t ever match table rows – because table rows never are children of a table.
They are children of a tbody, thead or tfoot element. The fact that there is no such element in your HTML code is not relevant here – in that situation, browsers create a tbody element implicitly when creating the DOM – they have to, because the specification says so.
You can easily verify that using your browser’s DOM inspector. Even for your minimal table example above, you’ll see that there is a tbody.
I have a td which adds a hover class when I hover the mouse over it:
.hover{
border: 1px solid #364861;
background: #5979a0 url(img.png) 50% 50% repeat-x;
font-weight: bold;
color: #ffffff;
border-radius: 10px;
}
For some reason I can't figure out, the border attribute wasn't taking effect. I randomly added
float: left;
to the class, and now it works...
It works, so I'm happy, but I don't know why.
I can't recreate the problem in a fiddle, there must be some class somewhere in my DOM that's having an effect on my td. But I just don't know how a float would effect the border-radius of an element.
I did not know these to attributes were linked in any way.
This is because a td cannot have border-radius. When you give it a float it breaks out of it's table structure and become a seperate element that has it's own structure, so you will see the border-radius.
i don't see a use case for a table cell with rounded corners. So it sounds likeyou are misusing the table/td tags. If it's not table data, don't put it in a table structure. Just use div's with rounded corners.
I'm using vBulletin to style a forum which primarily uses tables to style the site. How would I go about using padding on a tbody to space the content away from the border?
Here you can see a picture of my main site where the content is pushed 5px away from the border:
Whereas on vBulletin, adding padding on tbody doesn't push the content away:
Method 1
You have a couple different options:
tbody:before {
content: '';
display: block;
height: 20px;
}
Adding this basically "inserts" content before the end. It's sort of a "quick-n-dirty" fix.
Method 2
Another option is giving your table a border-collapse: collapse and then giving your tbody a border value:
table {
border-collapse: collapse;
}
table tbody {
border-right: 20px solid transparent;
}
Both of these methods have drawbacks, however. The before selector might not work in IE7, and requires a !DOCTYPE to work in IE8. The second method can sometimes be a bit touchy, depending on the rest of your css. Be sure to have a !DOCTYPE
Add an empty col and/or row with padded cells.
Adding :before content to tbody may not have the effect you're looking for. It may not push borders around as you think or even other cells or col or row groups. In general do not try to put anything outside a cell in a table, you're asking for trouble.
It seems like Chrome/Firefox do not render borders on tr, but it renders the border if the selector is table tr td.
How can I set a border on a tr ?
My attempt, which doesn't work:
table tr {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>
Text
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/edi9999/VzPN2/
This is a similar question: Set border to table tr, works in everything except IE 6 & 7 , but it seems to work everywhere except for IE.
Add this to the stylesheet:
table {
border-collapse: collapse;
}
JSFiddle.
The reason why it behaves this way is actually described pretty well in the specification:
There are two distinct models for setting borders on table cells in
CSS. One is most suitable for so-called separated borders around
individual cells, the other is suitable for borders that are
continuous from one end of the table to the other.
... and later, for collapse setting:
In the collapsing border model, it is possible to specify borders that
surround all or part of a cell, row, row group, column, and column
group.
It is possible to emulate border in table border collapse separate mode with css box-shadow :
table tr {
box-shadow: 0 0 4px #ccc;
}
Besides what top answer says, you should also make sure your border has visible style, for example:
border-style: solid;
if you are adding custom styles to some website.