css border not showing but css is applied - html

I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:


tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>


thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>


i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;

Related

Adding continuous border to only header and footer of table

I would like a table where some cells have broken borders and others have continuous borders. For example, here is the html for a four column, 12 row table:
<table>
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
I would like the thead cells to have a continuous border along the bottom (except for the first, blank cell), whilst maintaining a broken border on the other rows.
Here is some CSS, it creates broken borders along the bottom of the rows (except the leftmost cells of each row).
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}
I want the very first row - the header row - to have a continuous, unbroken line, whereas I want the others to remain as they are (i.e. broken). All I can find, so far, is styling that is applied to the whole table: for example, I can't seem to collapse borders or set zero spacing on just the cells in the thead part of the table. So if I make the borders continuous, it is applied to the entire table.

You'll probably have to put it in two different tables, the first containing the content of your tr.header, with cellspacing="0" and the second with the default value. However, that means that you'll have to add CSS to keep the width's consistent, and that may be a problem depending on what you are putting into the table(s). If that isn't a problem, here is the code with all columns set to 25% width:
(and a JSFiddle)
<body>
<table cellspacing="0">
<thead>
<tr class="header">
<th id="blank_cell"></th> <!-- blank -->
<th>first_c</th>
<th>second_c</th>
<th>third_c</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<th>row one</th>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<th>row two</th>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<th>row three</th>
<td>3,1,</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<tr>
<th>row four</th>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
</tr>
<tr>
<th>row five</th>
<td>5,1</td>
<td>5,2</td>
<td>5,3</td>
</tr>
<tr>
<th>row six</th>
<td>6,1</td>
<td>6,2</td>
<td>6,3</td>
</tr>
<tr>
<th>row seven</th>
<td>7,1</td>
<td>7,2</td>
<td>7,3</td>
</tr>
<tr>
<th>row eight</th>
<td>8,1</td>
<td>8,2</td>
<td>8,3</td>
</tr>
<tr>
<th>row nine</th>
<td>9,1</td>
<td>9,2</td>
<td>9,3</td>
</tr>
<tr>
<th>row ten</th>
<td>10,1</td>
<td>10,2</td>
<td>10,3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>End</th>
<td>e_one</td>
<td>e_two</td>
<td>e_three</td>
</tr>
</tfoot>
</table>
</body>
body {
font-family:Arial,Verdana,sans-serif;
color:#111111;
}
table {
width:450px;
}
td,th {
padding:7px 10px 10px 10px;
}
thead th {
border-bottom:4px solid #111111;
}
tbody th {
border-left:2px solid #111111;
border-right:4px solid #111111;
}
tbody td {
border-bottom:2px solid #111111;
width: 25%;
}
th {
text-transform:uppercase;
letter-spacing:0.1em;
word-spacing:0.3em;
text-align:left;
width: 25%;
}
#blank_cell {
border:none;
}
tr:hover {
background-color:#c3e6e5;
}

how to set width according to thead in table format structure?

i am working on table structure html and i want to set my design in my stucture!!
i have get issue my table format width is set according to body content !
My question is how can i set width accrding to header ?
here is my code.
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>
</table>
You can see my output:
enter image description here

Set the style on any of the td or th tags in the thead, and it will apply to all the cells in the column.
In the example below I've used an inline style, but that is not necessary. You could use CSS classes for that as well.
Also, you should replace the td's in the thead with th elements.
table td {
border: 1px black solid;
}
<table>
<thead>
<tr>
<td style="width: 50px">Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>

You should set style width for each column, in other case it will resize to body size.
For example:
table {
border: solid 1px #000;
}
table td:nth-child(1) {
width: 200px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 100px;
border-right: solid 1px #ccc;
}
table td:nth-child(3) {
width: 150px;
border-right: solid 1px #ccc;
}
table td:nth-child(2) {
width: 50px;
}
<table>
<thead>
<tr>
<td>Document name</td>
<td>Category</td>
<td>Sub category</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr>
<td>Indisoft – RX Office and Thinagee- 401K Payment </td>
<td>admin</td>
<td>admin-sub</td>
<td>published</td>
</tr>
</tbody>

How to style a table with only partly border spacing?

I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":

You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>

How to set border to <tbody> element?

Why doesn't the border show around tbody in the following? I tried rules="groups" and the border appears, but only between the two tbody sections and it is collapsed.
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>

Add:
table {border-collapse: collapse;}
FIDDLE

Add display:block to your tbody style. Try this
tbody{
display:block;
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
You can test it out on this fiddle

Use box-shadow instead of border. It works no matter which value of border-collapse was applied. In addition, you can also apply border-radius to it.
tbody {
box-shadow: 0 0 0 1px black;
border-radius: 5px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tbody>
</table>

.table_body, .tbody_td, .tbody_th
{ border: 1px solid black; }
.table_body { border-collapse: collapse; }
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>

How to hide the border for specified rows of a table?

I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:

I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:

Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>

You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily