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;
}
I would like to create a simple html table with sub-rows within a single row. It looks something like this;
The tricky part is to divide the 3rd column into 2 rows row 1 and Row 2. How would the html code look like to implement such a table?
Using rowspan
<table border=1>
<tr><td rowspan=2>1</td><td rowspan=2>Main</td><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
</table>
Try this:
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">col1</th>
<th rowspan="3">col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</table>
</body>
</html>
You can use two div's to simulate the two rows in the last column:
table {
border-collapse: collapse;
width: 50%;
height: 50%;
}
th, td {
border: 1px solid black;
}
td .test {
border-bottom: 1px solid black;
}
<table>
<tr id="row1">
<td>a
</td>
<td>b
</td>
<td>
<div class="test">Test</div>
<div>Test</div>
</td>
</tr>
</table>
Even nested tables might help:
<table>
<tr>
<td>Hi</td>
<td>
<table>
<tr>
<td>
How
</td>
</tr>
<tr>
<td>
When
</td>
</tr>
</table>
</td>
</tr>
</table>
Nested Tables Fiddle
I am trying to design the following table using html and css how do I proceed with it. Thank you in advance.
This solution will save you from having to use nested tables. The trick is that you really have four rows, not three, and make use of colspan and rowspan.
Note that you need to set a height for the td in order to ensure they are even.
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 30px;
}
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
you can try this one:
HTML
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
</table>
</td>
<td>Th</td>
</tr>
</table>
CSS
table
{
width:100%;
height:100px;
text-align:center;
border:2px solid gray;
border-collapse: collapse;
}
td
{
border:2px solid gray;
}
.container
{
width:100%;
}
.container .header
{
width:100%;
height:200px;
background:#5076BB;
}
.container .slider
{
width:100%;
height:500px;
background:#5076BB;
}
DEMO HERE
UPDATED DEMO HERE
Read the tutorial: http://www.w3schools.com/html/html_tables.asp
In particular read the part about the attributes rowspan="" and colspan=""
Example:
<td colspan="2">This table data will span two columns</td>
<td rowspan="2">This table data will span two rows</td>
I have a layout with two adjacent tables. When a row in one table is hovered, I'd like to apply the same style to the cells in the rows across both tables.
Is this possible with css only?
table{
display: inline-block;
}
td{
border:1px solid grey;
}
table#lhs tr:hover{
background-color:green;
}
table#lhs tr:hover {
background-color:green;
}
<table id="lhs">
<tr>
<td>lhs row 1</td>
</tr>
<tr>
<td>lhs row 2</td>
</tr>
<tr>
<td>lhs row 3</td>
</tr>
</table>
<table id="rhs">
<tr>
<td>rhs row 1</td>
</tr>
<tr>
<td>rhs row 2</td>
</tr>
<tr>
<td>rhs row 3</td>
</tr>
</table>
I came up with this, which seems pretty close to what you were asking for:
table {
display: inline-block;
}
div {
overflow:hidden;
float:left;
}
td {
border:1px solid grey;
}
table#lhs tr:hover {
background-color:green;
}
table#lhs tr:hover {
background-color:green;
}
#lhs td:hover::before {
background-color: green;
content:'\00a0';
position: absolute;
width: 10000px;
z-index: -1;
}
td {
position: relative;
}
<div>
<table id="lhs">
<tr>
<td>lhs row 1</td>
</tr>
<tr>
<td>lhs row 2</td>
</tr>
<tr>
<td>lhs row 3</td>
</tr>
</table>
<table id="rhs">
<tr>
<td>rhs row 1</td>
</tr>
<tr>
<td>rhs row 2</td>
</tr>
<tr>
<td>rhs row 3</td>
</tr>
</table>
</div>
I have 6 columns & I want to use colspan for 3&4 and 5&6 column.
And I don't want to show 1st & 2nd column for that particular row.
How to hide 1&2 column in that row?
Desired output..
Remove the border from the cells you wish to "hide". They are still there, but visually absent.
Have a fiddle!
Experimental fiddle for a table { border: xxx; } fix.
In this example I am targeting the cell with tbody tr:first-child td:first-child. This could obviously also be targeted with a class.
HTML
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: collapse;
width: 500px;
}
td {
border: solid 1px #000;
padding: 10px;
}
tbody tr:first-child td:first-child {
border: none;
}
Use display:none; in your CSS File on the 1st & 2nd Column.
You can select them with:
td:nth-of-type(1),
td:nth-of-type(2) {
display:none;
}
Use visibility:hidden on the first two columns of the row.
Try to use visibility: hidden; empty-cells: hide; for that cells.
Here is a fiddle
HTML
<table border="1">
<thead>
<tr>
<td colspan="2" style="border: 0;">a1</td>
<td colspan="2">a3</td>
<td colspan="2">a5</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>5555</td>
</tr>
</tbody>
</table>
CSS
table {
border: none;
border-collapse: collapse;
}