Border ALL the things!
I'm writing a HTML table and I'm getting extremely strange behavior. I expected to see all of my cells have a border, but that's not the case in Firefox.
I'm getting this:
<style>
.speciestable{ border:1px solid black;}
.speciestable td{border:1px solid #555; vertical-align:top; text-align:center; }
</style>
<table class="speciestable">
<tr>
<td rowspan="3">LEFT</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">Bottom</td>
</tr>
</table>
What's going on? Am I doing something wrong? Why don't all my cells have borders?
OOPS. I'm a moron. I had some conflicting syles in my external CSS that were removing the borders.
External.css
.tborder tr td:first-child{ border-width:0px; }
I realized that the HTML was actually this:
<table class="tborder>
<tr><td>
...
<table class="speciestable">
Related
How do i give a border to the <tr>(t_border).
The inner table shouldnt inherit the style from the outer one
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</tbody>
You can try as per my code:
<style>
table{
border-collapse: collapse;
}
table.t_border tr{
border:solid 1px red;
}
</style>
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td><td>B</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Hope it might help you!
you can set separate style for the class .t_border, see example code..
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</table></td></tr></table>
<style>
.t_border
{
border: 1px solid red;
}
</style>
just give style of tr tag
<tr>
<td style="border : 1px solid black">B</td>
</tr>
If you need to style your border, you may use other answers.
But if you only need to use the pure HTML table style, you can use this :
<table border=1> to give border on your table inside table.
You can't add a border to a <tr>. You would have to add it to the <td>s. Also your t_border table isn't be being closed </table> and your outer table should be closed with </table> instead of </tbody>.
Just giving the border to the tr won't really have an effect. It would be better to give the td's a border top or bottom of what you want it to actually show up. For example, border-bottom:2px solid black;
Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.
To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>
<body>
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with css:</p>
<table class="cell-pad">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
You can solve these problems using CSS.
table.table-big td {
padding: 10px;
}
table.table-collapse {
border-collapse: collapse;
}
table td {
border: 1px solid #333;
}
<table class="table-big table-collapse">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.
You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.
I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
Blue
</tr>
<tr>
White
</tr>
</table>
The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
Does THBODY have anything to do with it?
Thanks,
CSS Code
table { border-collapse:collapse; text-align:center; }
table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }
th { color: #fff;
background-color: #5c87b2; text-align:center; }
tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }
Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.
You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.
where, the CSS is
body {
background-color: black;
color: red;
}
table tr:nth-child(odd) {
background-color: blue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
The only problem you have is missing the tag in the table.
It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
here is the fiddle: http://jsfiddle.net/rBwBm/
I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.
The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue
<tr>
<th>Name</th>
</tr>
This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White
In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:
<thead>
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<!-- Table Content in Here -->
</tbody>
And I then changed the style sheet to be:
tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}
So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:
Does THead have anything to do with it?
Yes, it has EVERYTHING to do with it.
I use Richfaces and have a rich:datatable with nested rich:tooltip-s.
You can imagine the generated HTML looks like this:
<table style="width: 400px; border: 3px solid #000; caption-side: bottom; border-collapse:collapse;">
<caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog Shasta</caption>
<thead>
<tr>
<th>Month</th>
<th>Fur Shed (mm)</th>
</tr>
<thead>
<tbody style="background-color: #ff3;">
<tr>
<td>April</td>
<td>20</td>
</tr>
<tr>
<td>May</td>
<td>19</td>
</tr>
<tr>
<td>June</td>
<td>10</td>
</tr>
<tr>
<td>July</td>
<td>6</td>
</tr>
<tr>
<td>August</td>
<td>8</td>
</tr>
<tr>
<td>September</td>
<td>14</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="display:none;">
<script type="text/javascript">
new RichFaces.ui.DataTable("form1:table1:0:j_idt227",{"ajaxEventOptions":{}} )
</script>
</td>
</tr>
The problem with this html is in the 2nd (generated from RF) tbody: td has style="display:none;" and in Google Chrome this causes the bottom border being not shown.
My question is: do you know if it is possible to find a workaround to fix this? Moving the display:none; at tr or tbody level would already be a solution.
Thanks!
You can add a footer to the table (<f:facet name="footer">) which will render under the hidden row but if you don't want to you can use this CSS:
table > tbody > tr:last-child {
border-bottom: 3px solid #000;
}
this will find the last row and add a border at the bottom, of course this will affect every table on your page so you should use some identifiers. Also note that the :last-child selector may not be supported by all browsers (it does work in Chrome).
Other alternative is to wrap the table in a div but you'd need to play a little with the CSS to make it look the way you want.
I know this is a dumb question but I seem to have totally forgotten how to do it.
I have a HTML table and I want to remove all borders around all the cells so that there is only one border around the entire table.
My code looks like:
<table border='1' width='500'>
<tr><th><h1>Your Wheelbarrow</h1></th><tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Delete</th>
</tr>
Just collapse the table borders and remove the borders from table cells (td elements).
table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}
Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.
The HTML attribute for the purpose is rules=none (to be inserted into the table tag).
Probably you just needed this CSS rule:
table {
border-spacing: 0px;
}
http://jsfiddle.net/Bz3Jt/3/
<style type="text/css">
table {
border:1px solid black;
}
</style>
You might want to try this: http://jsfiddle.net/QPKVX/
Not really sure what you want your final layout to look like- but that fixes the colspan problem too.
Just use your table inside a div with a class (.table1 for example) and don't set any border for this table in CSS. Then use CSS code for that class.
.table1 {border=1px solid black;}
Change your table declaration to:
<table style="border: 1px dashed; width: 500px;">
Here is the sample in action: http://jsfiddle.net/kc48k/
If none of the solutions on this page work and you are having the below issue:
You can simply use this snippet of CSS:
td {
padding: 0;
}
As #brezanac mentioned, you can add the border-collapse, no need for anything else. I attach and example
.table {
border: 1px solid #CCC; // only for example
border-collapse: collapse;
}
th, td {
border: 1px solid #CCC; // only for example
}
<table aria-describedby="table without borders"
class="table">
<tr>
<th id="id">id</th>
<th id="name">name</th>
<th id="price">price</th>
</tr>
<tr>
<td>1</td>
<td>Pizza</td>
<td>7.99</td>
</tr>
<tr>
<td>2</td>
<td>Burger</td>
<td>3.99</td>
</tr>
</table>
<br/>
<table aria-describedby="table with borders">
<tr>
<th id="id">id</th>
<th id="name">name</th>
<th id="price">price</th>
</tr>
<tr>
<td>1</td>
<td>Pizza</td>
<td>7.99</td>
</tr>
<tr>
<td>2</td>
<td>Burger</td>
<td>3.99</td>
</tr>
</table>