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>
Related
In Firefox, I have a table which when border-collapse is applied the borders are in different thicknesses. But this problem doesn't occours in Chrome.
The HTML and CSS code of the table:
//HTML
<div id="divTabela">
<table width="100%" cellpadding="4" border="1" name="tabelainfo" id="tabelainfo" class="bordasimples">
<tbody>
<tr id="titulotabela">
<th colspan="1" rowspan="1">Data Inicial</th>
<th colspan="1" rowspan="1">Data Final</th>
<th colspan="1" rowspan="1">Distribuidor</th>
<th colspan="1" rowspan="1">Agendar</th>
<th colspan="1" rowspan="1">Ver Detalhes</th>
</tr>
<tr id="corpotabela">
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><div></div></div></td>
</tr>
<tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####/td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><div></div></div></td>
</tr>
</tbody>
</table>
<br>
</div>
//CSS
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid;}
table.bordasimples tr th {border:1px solid;}
#tabelainfo {
padding-top: 0px;
font-size: 12px;
font-family: Calibri;
text-align: justify;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #083c06;
text-decoration: none;
}
See the table rows in the image below:
I solved the problem just changing the CSS code:
table.bordasimples {
border-spacing: 0px;
border:1px solid #D2DDD4;
}
table.bordasimples tr td, table.bordasimples tr th
{border:1px solid #D2DDD4;}
I replaced the border-collapse for border-spacing and changed the color of borders, now my table is the way I wanted, and with a better layout.
Thanks everyone!
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'm trying to color the even and odd elements of the table rows following the table row with class "ratingHead". When ".ratingHead" is reached the colors should restart.
This image of the table may be more clear
Here is the structure of the code
<table class="evalTable">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="tableHeadings"></tr>
<tr class="ratingHead"></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableHeadings"></tr> <-- Keeps repeating based on how much information
<tr class="ratingHead"></tr> is dynamically generated from the database
<tr class="tableItems></tr> <------------------------------------------------------->
</body>
</table>
This is the css I have at the moment
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
You cannot do that with the current html structure you have.
But you can have multiple tbody elements for the grouping (this way the odd/even is reset for the tr elements under a new tbody)
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
<table class="evalTable">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class="tableHeadings"><td>heading #1</td></tr>
<tr class="ratingHead"><td>Rating</td></tr>
<tr class="tableItems"><td>row #1.1</td></tr>
<tr class="tableItems"><td>row #1.2</td></tr>
<tr class="tableItems"><td>row #1.3</td></tr>
<tr class="tableItems"><td>row #1.4</td></tr>
</tbody>
<tbody>
<tr class="tableHeadings"><td>heading #2</td></tr>
<tr class="ratingHead"><td>Rating</td></tr>
<tr class="tableItems"><td>row #2.1</td></tr>
</tbody>
</table>
The best way to approach what you are trying to do is to use multiple adjacent tables, like this:
.eval h3, .eval td {
padding: 2px 10px;
}
.eval h3 {
color: rgb(233, 231, 239);
background: #5E4F67;
margin: 0;
font-weight: normal;
}
.eval table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
tr.tableHeadings{
background: #9084A0;
}
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
tr.tableItems td:nth-child(even) {
background-color: rgba(255,255,255,.5);
}
<div class="eval">
<h3>Chapter Heading</h3>
<table>
<thead>
<tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>
<tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>
</thead>
<tbody>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>
<tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>
</thead>
<tbody>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
</tbody>
</table>
</div>
I think your syntax should be:
tr:nth-child(even) {background: #f9f9f9;}
tr:nth-child(odd) {background: rgb(233, 231, 239)}
I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is my CSS, which I am using for the above div:
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
Using position: sticky on th will do the trick.
Note: if you use position: sticky on thead or tr, it won't work.
https://jsfiddle.net/hrg3tmxj/
Some of these answers seem unnecessarily complex. Make your tbody:
display: block; height: 300px; overflow-y: auto
Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.
None of the other examples provided worked in my case - e.g. header would not match table body content when scrolling. I found a much simpler and clean way, allowing you to setup the table the normal way, and without too much code.
Example:
.table-wrapper{
overflow-y: scroll;
height: 100px;
}
.table-wrapper th{
position: sticky;
top: 0;
background-color: #FFF;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Thanks to https://algoart.fr/articles/css-table-fixed-header
I think you need something like this ?
.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid grey;}
</style>
<table class="table">
<thead>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
<th>Judul4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="table-wrap" >
<table class="table-dalam">
<tbody>
<?php foreach(range(1,10) as $i): ?>
<tr >
<td class="td-nya">td1 </td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Source
I needed the same and this solution worked the most simple and straightforward way:
http://www.farinspace.com/jquery-scrollable-table-plugin/
I just give an id to the table I want to scroll and put one line in Javascript. That's it!
By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.
This is my "crutches" solution by using html and css.
There used 2 tables and fixed width of tables and table cell`s
https://jsfiddle.net/babaikawow/s2xyct24/1/
HTML:
<div class="container">
<table class="table" border = 1; > <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Працівник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Дійсно до</th>
<th class="tbDataDiseases">Критерій1</th>
<th class="tbDataDiseases">Критерій2</th>
<th class="tbDataDiseases">Критерій3</th>
<th class="tbDataDiseases">Критерій4</th>
<th class="tbDataDiseases">Критерій5</th>
</tr>
</thead>
</table>
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
}
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse;
}
/* Styles of the th and td */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Дійсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П І Б */
.tbDataName{
width: 15%;
}
/*Критерії */
.tbDataDiseases{
width:10%;
}
A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this
http://css-tricks.com/persistent-headers/
This code works form me. Include the jquery.js file.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings');
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td> </td>
<td>Firstname</td>
<td>Lastname</td>
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>
use StickyTableHeaders.js for this.
Header was transparent . so try to add this css .
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
I know this question is old, but if anyone have this same issue, an easy way without having to write lots of CSS, just wrap your <table> with <div> and your <div> should have a style with overflow-y: auto; and some height.
As below example:
<div style="overflow-y: auto; height: 400px;">
<table>...</table>
</div>
Add a style to the thead as below:
thead {
position: sticky;
top: 0;z-index: 2;
}
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>...