How do I increase the white space here between Column B and Column C (but not Column A and Column B)? I'm after something that will let me target a column very specifically, so I probably want inline CSS.
<html>
<style>
th {
background-color: #D8D8D8;
}
</style>
<table>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</html>
<style>
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td {
text-align: center;
}
tr:nth-child(even) {
background-color: #eee;
}
th[scope=col] {
background-color: #696969;
color: #fff;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
</style>
<table>
<tr>
<th scope="col">Column A</th>
<th scope="col">Column B</th>
<th scope="col">Column C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
<style>
th{
background-color: #D8D8D8;
}
td,
th {
padding: 10px;
}
td {
text-align: center;
}
table {
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
</style>
<table>
<tr>
<th>Column A</th>
<th>Column B</th>
<th style="width: 0.1rem;background:none !important;"></th>
<th>Column C</th>
</tr>
<tr>
<td>1</td>
<td >2</td>
<th style="width: 0.1rem;background:none !important;"></th>
<td >3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<th style="width: 0.1rem;background:none !important;"></th>
<td>3</td>
</tr>
</table>
Related
In my borderless HTML table I replaced the heading of a column with a compound heading, consisting of three parts (see image). I did this by inserting a second table into the corresponding heading element. However, I am at a loss to remove the outer border of that table. In the image, the blue background color of the heading element remains visible. The table should be flush with the heading element, so that the blue of the heading element no longer is visible. How can this be achieved?
Here is the HTML code of the table in the image:
table {
color: white;
border-collapse: collapse;
border: none;
}
th {
padding: 10px;
text-align: center;
}
td {
background-color: olive;
padding: 10px;
text-align: center;
}
<table>
<tr>
<th style="background-color:green">A</th>
<th style="background-color:blue">
<table>
<tr>
<th style="background-color:maroon" colspan="2">B</th>
</tr>
<tr>
<th style="background-color:red">x</th>
<th style="background-color:orange">y</th>
</tr>
</table>
</th>
<th style="background-color:purple">C</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>250</td>
<td>550</td>
<td>670</td>
</tr>
</table>
Add this CSS rule to remove the padding from that cell:
body > table > tbody > tr:first-child > th:nth-child(2) {
padding: 0;
}
body > table > tbody > tr:first-child > th:nth-child(2) {
padding: 0;
}
<!DOCTYPE html>
<html>
<style>
table {
color: white;
border-collapse: collapse;
border: none;
}
th {
padding: 10px;
text-align: center;
}
td {
background-color: olive;
padding: 10px;
text-align: center;
}
</style>
<body>
<table>
<tr>
<th style="background-color:green">A</th>
<th style="background-color:blue">
<table>
<tr><th style="background-color:maroon" colspan="2">B</th></tr>
<tr>
<th style="background-color:red">x</th>
<th style="background-color:orange">y</th>
</tr>
</table>
</th>
<th style="background-color:purple">C</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>250</td>
<td>550</td>
<td>670</td>
</tr>
</table>
</body>
</html>
html
css
You could use a class to remove the padding.
table {
color: white;
border-collapse: collapse;
border: none;
}
th {
padding: 10px;
text-align: center;
}
.no-padding { padding: 0 }
td {
background-color: olive;
padding: 10px;
text-align: center;
}
<table>
<tr>
<th style="background-color:green">A</th>
<th class="no-padding" style="background-color:blue">
<table>
<tr>
<th style="background-color:maroon" colspan="2">B</th>
</tr>
<tr>
<th style="background-color:red">x</th>
<th style="background-color:orange">y</th>
</tr>
</table>
</th>
<th style="background-color:purple">C</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>250</td>
<td>550</td>
<td>670</td>
</tr>
</table>
I have a table that will contain many columns and I would like to add input fields inside header cells, but I would like for the input to fit the width depending on the body content.
This is how it looks like without the input fields:
And this is how it looks like with the input fields:
As it can be seen, columns like 'index' and 'Is Active' are taking too much space, and I would like to maintain the first layout as much as possible. I tried to set input width to 100% and auto, but it doesn't seem to help very much.
The current css looks like:
.table {
font-family: Arial, Helvetica, sans-serif;
}
.table thead {
position: sticky;
top: 0;
}
.table thead th {
border: 1px solid #e4eff8;
background: white;
cursor: pointer;
}
.table thead th.header-label {
cursor: pointer;
background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
color: white;
border: 1px solid white;
}
.table th,
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
}
.table td {
border: 1px solid #e4eff8;
}
.table input {
width: 100%;
}
<table class="table">
<thead>
<tr>
<th class="header-label">Index</th>
<th class="header-label">Name</th>
<th class="header-label">Phone</th>
<th class="header-label">Company</th>
<th class="header-label">Registered</th>
<th class="header-label">Is Active</th>
</tr>
<tr>
<th><input type="number"></th>
<th><input type="string"></th>
<th><input type="string"></th>
<th><input type="string"></th>
<th><input type="date"></th>
<th><input type="boolean"></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Paige Bean</td>
<td>+1 (871) 458-2959</td>
<td>MOREGANIC</td>
<td>2018-12-27T11:28:50 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>1</td>
<td>Knox Holman</td>
<td>+1 (880) 497-2808</td>
<td>MAINELAND</td>
<td>2017-05-07T02:54:22 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>2</td>
<td>Brandy Colon</td>
<td>+1 (969) 513-2827</td>
<td>NEXGENE</td>
<td>2017-06-07T06:42:31 -00:00</td>
<td>true</td>
</tr>
<tr>
<td>3</td>
<td>Suzette Austin</td>
<td>+1 (863) 445-3604</td>
<td>JETSILK</td>
<td>2015-10-24T11:10:41 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>4</td>
<td>Downs Cain</td>
<td>+1 (822) 574-2617</td>
<td>INSECTUS</td>
<td>2017-10-19T08:18:09 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>5</td>
<td>Michael Yang</td>
<td>+1 (875) 492-3905</td>
<td>DELPHIDE</td>
<td>2016-08-15T01:31:55 -01:00</td>
<td>false</td>
</tr>
</tbody>
</table>
So how do you make this happen with pure css, without hard coding the width of each column?
Since the text on the input can't be predicted, every input with width:100% tries to get the most width it can. The solution is use a wrapping div with absolute positioning.
This is how it works (it obvious to me that OP understands the "wrapper div with absolute position" trick. The following is intended for someone learning CSS):
.table .tr-inputs th has position: relative so it serves as reference for child absolute positioned objects. We do not set anything about width (so it's completely auto), and we set a padding-bottom: 1.2rem to keep the th with the correct height for our absolute positioned elements (since absolute positioned elements are removed from the flow and "does not take any space").
.table .tr-inputs div is our wrapper div. We set position: absolute and set all top,right,left,bottom to 0. Then, it stretches it self to fill its relative positioned parent, which is our .table .tr-inputs th.
input has width: 100% so it takes all the width of its parent, which is our absolute positioned wrapper div.
.table {
font-family: Arial, Helvetica, sans-serif;
}
.table thead {
position: sticky;
top: 0;
}
.table thead th {
border: 1px solid #e4eff8;
background: white;
cursor: pointer;
}
.table thead th.header-label {
cursor: pointer;
background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
color: white;
border: 1px solid white;
}
.table th,
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
}
.table td {
border: 1px solid #e4eff8;
}
.table .tr-inputs th {
position: relative;
padding: 0;
padding-bottom: 1.2rem;
margin: 0;
}
.table .tr-inputs div {
position: absolute;
display: inline-block;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.table input {
width: 100%;
box-sizing: border-box;
}
<table class="table">
<thead>
<tr>
<th class="header-label">Index</th>
<th class="header-label">Name</th>
<th class="header-label">Phone</th>
<th class="header-label">Company</th>
<th class="header-label">Registered</th>
<th class="header-label">Is Active</th>
</tr>
<tr class="tr-inputs">
<th>
<div><input type="number"></div>
</th>
<th>
<div><input type="string"></div>
</th>
<th>
<div><input type="string"></div>
</th>
<th>
<div><input type="string"></div>
</th>
<th>
<div><input type="date"></div>
</th>
<th>
<div><input type="boolean"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Paige Bean</td>
<td>+1 (871) 458-2959</td>
<td>MOREGANIC</td>
<td>2018-12-27T11:28:50 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>1</td>
<td>Knox Holman</td>
<td>+1 (880) 497-2808</td>
<td>MAINELAND</td>
<td>2017-05-07T02:54:22 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>2</td>
<td>Brandy Colon</td>
<td>+1 (969) 513-2827</td>
<td>NEXGENE</td>
<td>2017-06-07T06:42:31 -00:00</td>
<td>true</td>
</tr>
<tr>
<td>3</td>
<td>Suzette Austin</td>
<td>+1 (863) 445-3604</td>
<td>JETSILK</td>
<td>2015-10-24T11:10:41 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>4</td>
<td>Downs Cain</td>
<td>+1 (822) 574-2617</td>
<td>INSECTUS</td>
<td>2017-10-19T08:18:09 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>5</td>
<td>Michael Yang</td>
<td>+1 (875) 492-3905</td>
<td>DELPHIDE</td>
<td>2016-08-15T01:31:55 -01:00</td>
<td>false</td>
</tr>
</tbody>
</table>
Never position: sticky <thead> elements. Use This solution instead: Table fixed header and scrollable body
Use background-color on <th> elements
Don't use padding on <th> elements - Use it on an inner .header-label <div>
.header-label should be an inner DIV if you want, no need to "classify" <th> elements
type="boolean" is an invalid type value. Use string or rather a type="checkbox"
/*QuickReset*/*{margin:0;box-sizing:border-box;}
/*
tableFixHead
https://stackoverflow.com/a/47923622/383904
*/
.tableFixHead {
overflow-y: auto;
height: 180px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
}
.table {
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
}
.table th {
background: #fff;
}
.table th .header-label {
padding: 0.2rem 0.5rem;
cursor: pointer;
background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
color: white;
border: 1px solid white;
white-space: nowrap;
}
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
border: 1px solid #e4eff8;
}
.table input {
display: block;
width: 100%;
font: 14px/1.4 sans-serif;
}
<div class="tableFixHead">
<table class="table">
<thead>
<tr>
<th><div class="header-label">Index</div><input type="number"></th>
<th><div class="header-label">Name</div><input type="string"></th>
<th><div class="header-label">Phone</div><input type="string"></th>
<th><div class="header-label">Company</div><input type="string"></th>
<th><div class="header-label">Registered</div><input type="date"></th>
<th><div class="header-label">Is Active</div><input type="string"></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Paige Bean</td>
<td>+1 (871) 458-2959</td>
<td>MOREGANIC</td>
<td>2018-12-27T11:28:50 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>1</td>
<td>Knox Holman</td>
<td>+1 (880) 497-2808</td>
<td>MAINELAND</td>
<td>2017-05-07T02:54:22 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>2</td>
<td>Brandy Colon</td>
<td>+1 (969) 513-2827</td>
<td>NEXGENE</td>
<td>2017-06-07T06:42:31 -00:00</td>
<td>true</td>
</tr>
<tr>
<td>3</td>
<td>Suzette Austin</td>
<td>+1 (863) 445-3604</td>
<td>JETSILK</td>
<td>2015-10-24T11:10:41 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>4</td>
<td>Downs Cain</td>
<td>+1 (822) 574-2617</td>
<td>INSECTUS</td>
<td>2017-10-19T08:18:09 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>5</td>
<td>Michael Yang</td>
<td>+1 (875) 492-3905</td>
<td>DELPHIDE</td>
<td>2016-08-15T01:31:55 -01:00</td>
<td>false</td>
</tr>
</tbody>
</table>
</div>
As a workaround you could use absolute position inputs and relative position wrapper around it to match the column size.
I dont think it is a good solution but it works.
As mentioned in the answer from #Roko C. Buljan there are some points you could do better.
.table {
font-family: Arial, Helvetica, sans-serif;
}
.table thead {
position: sticky;
top: 0;
}
.table thead th {
border: 1px solid #e4eff8;
background: white;
cursor: pointer;
}
.table thead th.header-label {
cursor: pointer;
background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
color: white;
border: 1px solid white;
}
.table th,
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
position: realtive;
}
.table td {
border: 1px solid #e4eff8;
}
.table .input_wrapper{
position: relative;
width: 100%;
display: block;
}
.table .input_wrapper::after{
content: "+";
color: rgba(0, 0, 0, 0);
display: block;
}
.table input {
position: absolute;
width: 100%;
left: 0;
}
<table class="table">
<thead>
<tr>
<th class="header-label">Index</th>
<th class="header-label">Name</th>
<th class="header-label">Phone</th>
<th class="header-label">Company</th>
<th class="header-label">Registered</th>
<th class="header-label">Is Active</th>
</tr>
<tr>
<th>
<div class="input_wrapper"><input type="number"></div>
</th>
<th>
<div class="input_wrapper"><input type=" string"></div>
</th>
<th>
<div class="input_wrapper"><input type="string"></div>
</th>
<th>
<div class="input_wrapper"><input type="string"></div>
</th>
<th>
<div class="input_wrapper"><input type="date"></div>
</th>
<th>
<div class="input_wrapper"><input type="boolean"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>Paige Bean</td>
<td>+1 (871) 458-2959</td>
<td>MOREGANIC</td>
<td>2018-12-27T11:28:50 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>1</td>
<td>Knox Holman</td>
<td>+1 (880) 497-2808</td>
<td>MAINELAND</td>
<td>2017-05-07T02:54:22 -01:00</td>
<td>false</td>
</tr>
<tr>
<td>2</td>
<td>Brandy Colon</td>
<td>+1 (969) 513-2827</td>
<td>NEXGENE</td>
<td>2017-06-07T06:42:31 -00:00</td>
<td>true</td>
</tr>
<tr>
<td>3</td>
<td>Suzette Austin</td>
<td>+1 (863) 445-3604</td>
<td>JETSILK</td>
<td>2015-10-24T11:10:41 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>4</td>
<td>Downs Cain</td>
<td>+1 (822) 574-2617</td>
<td>INSECTUS</td>
<td>2017-10-19T08:18:09 -01:00</td>
<td>true</td>
</tr>
<tr>
<td>5</td>
<td>Michael Yang</td>
<td>+1 (875) 492-3905</td>
<td>DELPHIDE</td>
<td>2016-08-15T01:31:55 -01:00</td>
<td>false</td>
</tr>
</tbody>
</table>
this is a simple javascript solution if you want:
change this section of HTML:
<tr>
<th><div class="input-container"><input type="number"></div></th>
<th><div class="input-container"><input type="string"></div></th>
<th><div class="input-container"><input type="string"></div></th>
<th><div class="input-container"><input type="string"></div></th>
<th><div class="input-container"><input type="date"></div></th>
<th><div class="input-container"><input type="boolean"></div></th>
</tr>
add this to your CSS:
table .input-container {
width: 0;
}
and link this javascript to your HTML:
let cont = document.querySelectorAll('.input-container')
for (let i = 0; i < cont.length; i++) {
cont[i].style.width = cont[i].parentNode.offsetWidth + 'px'
}
try this code
.table th {
padding : 0;
padding-right : 0.2rem;
}
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
}
Instead of :
.table th,
.table td {
padding: 0.2rem 0.5rem;
text-align: center;
}
How to make the horizontal scroll bar only affects the gray columns in the following illustration.
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
#table {
background: white;
margin: 100px auto;
width: 400px;
overflow: auto;
text-align: center;
}
#inner-table {
border-collapse: collapse;
border-radius: 3px;
overflow: hidden
}
td,
th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.sticky {
background-color: #1C3D5A;
color: #dae1e7;
}
.scroll {
background-color: #B8C2CC;
color: #22292f
}
<div id="table">
<table id="inner-table">
<thead>
<tr>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">1</td>
<td class="sticky">2</td>
<td class="scroll">3</td>
<td class="scroll">4</td>
<td class="scroll">5</td>
<td class="scroll">6</td>
<td class="scroll">7</td>
<td class="scroll">8</td>
<td class="sticky">9</td>
<td class="sticky">10</td>
</tr>
<tr>
<td class="sticky">11</td>
<td class="sticky">12</td>
<td class="scroll">13</td>
<td class="scroll">14</td>
<td class="scroll">15</td>
<td class="scroll">16</td>
<td class="scroll">17</td>
<td class="scroll">18</td>
<td class="sticky">19</td>
<td class="sticky">20</td>
</tr>
</tbody>
</table>
</div>
This was rather more difficult to put together than I anticipated - and even now, I am wondering if there isn't a much simpler approach.
The approach below utilises:
an outer container which contains two position: absolute tables
a fixed-width inner container - using margins for positioning inside the outer container - with a scrollbar, which allows you to see the oversized table it contains
Working Example:
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
.outer-container {
position: relative;
background-color: white;
margin: 40px auto;
width: 400px;
overflow: hidden;
text-align: center;
}
.outer-container,
.inner-container {
height: 125px;
}
table {
height: 108px;
}
.inner-container table {
border-radius: 3px;
}
td, th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.fixed-table th,
.fixed-table td {
background-color: #1C3D5A;
color: #dae1e7;
}
.inner-container {
margin: 0 130px;
max-width: 612px;
overflow: auto;
}
.inner-container > table {
background-color: #B8C2CC;
color: #22292f
}
.outer-container > table {
position: absolute;
top: 0;
border-collapse: collapse;
}
.outer-container > table:nth-of-type(1) {
left: 0;
}
.outer-container > table:nth-of-type(2) {
right: 0;
}
<div class="outer-container">
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<div class="inner-container">
<table>
<thead>
<tr>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
CSS3 should do the job.
table {
position: relative;
padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
position: absolute;
left: 0;
}
Sources
I have a HTML table and the final row needs to expand the full width of the page, while the rest of the rows are centered with a margin on the left and right like so:
#mytable {
margin: auto;
width: 90%;
}
Is this possible?
#mytable {
margin: auto;
width: 90%;
}
#mytable th,
#mytable td {
padding: 0.8em;
border: 1px solid;
}
#mytable th {
background-color: #6699FF;
font-weight: bold;
}
#container {
background-color: red;
width: 100%;
height: 100%;
}
#last-row {
background-color: blue;
}
<div id="container">
<table id="mytable">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>1</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>2</td>
<td>Column</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>3</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>4</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr id="last-row">
<td>5</td>
<td>first</td>
<td>One</td>
<td>Column</td>
</tr>
</table>
</div>
Here's a JSFiddle:
https://jsfiddle.net/zvjaep1q/
Use colspan to bridge columns.
#mytable {
margin: auto;
width: 90%;
}
#mytable th,
#mytable td {
padding: 0.8em;
border: 1px solid;
}
#mytable th {
background-color: #6699FF;
font-weight: bold;
}
#container {
background-color: red;
width: 100%;
height: 100%;
}
#last-row {
background-color: blue;
}
<div id="container">
<table id="mytable">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>1</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>2</td>
<td>Column</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>3</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>4</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr id="last-row">
<td colspan="4">5
first
One
Column</td>
</tr>
</table>
</div>
I've created a table in HTML, where I've used rowspan to categorize different "Procedures" based on the "Category" they belong to. I'm now trying to style the table in order split each "Category" section by using border-bottom in CSS.
Here's what I'd like to get:
What I want
But here's what I currently get:
What it looks like now
1. Why is the bottom border of the tbody tr not displaying at all?
2. How can I display the bottom borders only after each "Procedure" section ends?
And here's the HTML that I currently have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Price List</title>
<link rel="stylesheet" href="css/table.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
</head>
<body>
<table>
<caption>Price List</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Procedure</th>
<th scope="col">Price (PLN)</th>
<th scope="col">Price (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">These prices are valid until 31.12.2016.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">Diagnostics</th>
<th scope="row">Dental Consultation</th>
<td>100</td>
<td>25</td>
</tr>
<tr>
<th scope="row">Dental Checkup</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th rowspan="2">Cosmetic Dentistry</th>
<th scope="row">Teeth Cleaning</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Teeth Whitening</th>
<td>800</td>
<td>200</td>
</tr>
<tr>
<th rowspan="3">Conservative Dentistry</th>
<th scope="row">Tooth Filling</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Root Canal</th>
<td>1000</td>
<td>250</td>
</tr>
<tr>
<th scope="row">Tooth Extraction</th>
<td>500</td>
<td>125</td>
</tr>
<tr>
<th rowspan="3">Prosthodontics</th>
<th scope="row">Dental Crown</th>
<td>1400</td>
<td>350</td>
</tr>
<tr>
<th scope="row">Denture</th>
<td>2000</td>
<td>500</td>
</tr>
<tr>
<th scope="row">Dental Bridge</th>
<td>2400</td>
<td>600</td>
</tr>
</tbody>
</table>
</body>
</html>
And here's the CSS I currently have:
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
color: grey;
}
table {
max-width: 960px;
margin: 10px auto;
text-align: left;
}
caption {
font-weight: 700;
font-size: 2em;
padding: 20px 0;
}
thead th {
background: #0073e6;
color: #fff;
}
tbody tr {
background: #f2f2f2;
border-bottom: 1px solid #0073e6; /*despite this, no border is displayed*/
}
tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
text-align: center;
}
tfoot td {
font-style: italic;
font-size: 0.75em;
text-align: left;
background: white;
}
In order to show the row borders, set border-collapse: collapse on the table.
We can set the correct borders by selecting:
each th with the rowspan
each th in the same row as the rowspan
each td in the same row as the rowspan
the tfoot element
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
border-top: 1px solid #0073e6;
}
and setting a top border. We can do this with the general sibling selector (~).
Example
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
color: grey;
}
table {
max-width: 960px;
margin: 10px auto;
text-align: left;
border-collapse: collapse;
}
caption {
font-weight: 700;
font-size: 2em;
padding: 20px 0;
}
thead th {
background: #0073e6;
color: #fff;
}
tbody tr {
background: #f2f2f2;
}
tbody [rowspan],
tbody [rowspan] ~ th,
tbody [rowspan] ~ td,
tfoot {
border-top: 1px solid #0073e6;
}
tbody td:nth-last-of-type(1),
tbody td:nth-last-of-type(2) {
text-align: center;
}
tfoot td {
font-style: italic;
font-size: 0.75em;
text-align: left;
background: white;
}
<table>
<caption>Price List</caption>
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Procedure</th>
<th scope="col">Price (PLN)</th>
<th scope="col">Price (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">These prices are valid until 31.12.2016.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">Diagnostics</th>
<th scope="row">Dental Consultation</th>
<td>100</td>
<td>25</td>
</tr>
<tr>
<th scope="row">Dental Checkup</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th rowspan="2">Cosmetic Dentistry</th>
<th scope="row">Teeth Cleaning</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Teeth Whitening</th>
<td>800</td>
<td>200</td>
</tr>
<tr>
<th rowspan="3">Conservative Dentistry</th>
<th scope="row">Tooth Filling</th>
<td>200</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Root Canal</th>
<td>1000</td>
<td>250</td>
</tr>
<tr>
<th scope="row">Tooth Extraction</th>
<td>500</td>
<td>125</td>
</tr>
<tr>
<th rowspan="3">Prosthodontics</th>
<th scope="row">Dental Crown</th>
<td>1400</td>
<td>350</td>
</tr>
<tr>
<th scope="row">Denture</th>
<td>2000</td>
<td>500</td>
</tr>
<tr>
<th scope="row">Dental Bridge</th>
<td>2400</td>
<td>600</td>
</tr>
</tbody>
</table>
Add border-collapse in table :
table {
max-width: 960px;
margin: 10px auto;
text-align: left;
border-collapse: collapse
}
And add a class to the tr where you want the border