I must be overlooking something and I can seem to figure it out. I applied borders to my table cells and they are not showing. Please can someone take a look at the markup and css below and help me out. Here is the static site I have applied the Myers CSS reset to my stylesheet, not sure if it makes a difference.
<table>
<caption>Your Upcoming Bill Due Dates</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</thead>
</tr>
<tr>
<td></td>
<td>March 7th, 2013</td>
<td>Childcare</td>
<td>$560</td>
<td>Weekly</td>
<td>February 26th, 2013</td>
</tr>
<tr>
<td></td>
<td>June 13th, 2013</td>
<td>Water Bill</td>
<td>$125.60</td>
<td>Monthly</td>
<td>May 2nd, 2013</td>
</tr>
</table>
And here is the CSS
table {
clear: both;
border: 2px solid blue;
border-collapse: separate;
}
td th {
border: 2px solid red;
}
you could change border-collapse:collapse; to border-spacing:0;, but
td th {
border: 2px solid red; }
should be written so
td ,th {
border: 2px solid red;
}
In your code there is an error on:
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</thead> /* HERE */
</tr>
IT MUST BE
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</tr>
</thead>
Also change td th { with td,th {
In your CSS, you need to add a , between td and th, otherwise it's only looking to apply the style to th which are children of td:
td, th {
border: 2px solid red;
}
Also, your HTML is a little out of order - the </thead> is before the closing </tr>. You've also specified a <thead> but no <tbody>...
Related
I'm looking to structure the tables in this way:
I tried doing that but I don't know how to put two columns inside a row (inch, cm)
It's a clothing store of a friend so I'd appreciate any help in this.
Did you try to do like this?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align:center;
}
.title{
background-color:red;
}
.sub-title{
background-color:lightgreen;
}
.footer{
background-color:lightcoral;
}
<table>
<thead>
<tr class="title">
<th colspan="7">Size Table</th>
</tr>
<tr class="sub-title">
<th rowspan="2"></th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
</tr>
<tr class="sub-title">
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>M</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>L</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
</tbody>
<tfoot>
<tr class="footer">
<th colspan="7">description</th>
</tr>
</tfoot>
</table>
this code will help you. check the below jsfiddle link
https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/
Check This Code. I think this will help you
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2"> </th>
<th colspan="2"> </th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
I have a table with a thead and a tbody. I add a border-bottom to the thead and a background-color on the td in the tbody there seems to be some bleed in. This only happends in firefox :
Requirements :
It needs to look exactly the same in chrome firefox
You can't use empty cells
border-collapse cannot be changed
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
The bug seems to be related by the fact that the td's in the first tr in the tbody, don't share the same borders as the td's in the last tr in the thead. This is happening because of the colspan="4".
A way to circumvent this issue is to put in a tr at the top of the tbody, that no-one can see ( because it has no height ).
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
tbody>tr:first-child{
height: 0px;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
Or maybe.. this alternative where I removed the bottom-border, but replaced it by a green row.
table {
border-collapse:collapse;
font-size:20px;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
th:last-child{
height: 20px;
background-color:green;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
PS: You should use th instead of td in headers
How do I hide an entire table column in printing mode (using JS javascript:print())?
Because I'm using Bootstrap I tried its .hidden-print class to hide the last column (Operation column) in printing mode:
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<-- continued -->
</tr>
</tbody>
</table>
but it's only hide the column's content, displaying a column without content, when I need is it also hides TH and TD tags.
Is it possible to do this?
table,th,td {
border: 1px solid;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
#media print {
table,th,td {
border: 0px
}
button {
display: none;
}
}
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<button onclick="window.print();">Print</button>
There are issues with adding display: none; (which is what .hidden-print does) to table rows and cells because removing them from the document flow could very easily mess up the table formatting (see this question).
What about using visibility: hidden; instead?
In your case, you could try this, if you wanted to always target the last column:
#media print {
th:last-child, td:last-child {
visibility: hidden;
}
}
I have the following table:
<table class="table table66 table-bordered">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alan</td>
<td>11</td>
</tr>
</tbody>
I want to highlight the cell I'm hovering, not the entire row. I've tried this with no success:
td.table66:hover {
background-color: #C0C0C0;
}
Try
.table66 td:hover {
background-color: #C0C0C0;
}
What you are doing in your sample is trying to select a td which also has the class table66, when it is your table which has the class.
Try this.
.table66 td:hover {
background-color: #C0C0C0;
}
I've created a table which has the following code:
<table class="details resultTable">
<thead class="details">
<tr class="details">
<th class="details headerText">Heading 1</th>
<th class="details headerText">Heading 2</th>
</tr>
</thead>
<tbody class="imu-details-view">
<tr class="details">
<td class="details">Text 1</td>
<td class="details">Text 2</td>
</tr>
</tbody>
</table>
here is the CSS for the table
resultTable {
border-collapse: collapse;
text-align: left;
width: 100%;
}
resultTable th {
border-bottom: 2px solid #6678B1;
padding: 10px 8px;
}
resultTable td {
border-bottom: 1px solid #CCCCCC;
padding: 6px 8px;
}
Now the issue I'm having is, in Firefox the table looks like so:
and then in IE 8/9 this is what it looks like:
can some one explain how I can make the IE table look like the Firefox one?
Try below code. add align=left to tag.
<th align="left" class="details headerText">Heading 1</th>
<th align="left" class="details headerText">Heading 2</th>