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;
}
Related
I am trying to round the table header thead th on the far left and far right. I have them rounded but the underlying tr is poking its background color through leaving me with two th's with a rounded corner but with a sharp edge poking through from the thead tr.
I've tried playing around in the Firefox inspect element to apply CSS in real time but I cannot get the sharp edges to go away.
table thead tr {
background-color: #005073;
}
table thead tr th {
width: 200px;
text-align: center;
}
table {
margin-right: auto;
margin-left: auto;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table tbody tr:hover {
background-color: black;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #1ebbd7;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
<div class="contentTable">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Zip-Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>212 Lift St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>2</td>
<td>Todd</td>
<td>331 Geromino St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>3</td>
<td>Jim</td>
<td>1222 Jumbo Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>4</td>
<td>Susan</td>
<td>888 Bambi Way</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>112 Falcon Dr.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>6</td>
<td>Abby</td>
<td>6219 Pumpkin Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
</tbody>
</table>
</div>
Change
table thead tr {
background-color: #005073;
}
to
table thead th {
background-color: #005073;
}
You could achieve your desired effect by applying border-radius: 6px 6px 0px 0px; to the entire table and giving it overflow: hidden.
table thead tr {
background-color: #005073;
}
table thead tr th {
width: 200px;
text-align: center;
}
table {
margin-right: auto;
margin-left: auto;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table tbody tr:hover {
background-color: black;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #1ebbd7;
}
table {
border-radius: 6px 6px 0px 0px;
overflow: hidden;
}
<div class="contentTable">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Zip-Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>212 Lift St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>2</td>
<td>Todd</td>
<td>331 Geromino St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>3</td>
<td>Jim</td>
<td>1222 Jumbo Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>4</td>
<td>Susan</td>
<td>888 Bambi Way</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>112 Falcon Dr.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>6</td>
<td>Abby</td>
<td>6219 Pumpkin Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
</tbody>
</table>
</div>
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
If you see the table, you will notice that due to scroll bar on overflow alignment of table header & table rows mismatch.
How to maintain correct alignment among them in both cases: normal or overflow.
Here is the source code below.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc(100%);
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
<div>
just remove
overflow:auto
from you css file...
here fiddle example
fiddle
For overflowing-y issue you can try width calc on thead you already set that but that calc not woring. Check the css below I just separet the thead and tbody tr class for calc the width. Check scroll-y is working.
.table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
tbody tr {
display:table;
width: calc(100% - 1px); /*this 1px is the border which cause the overflow-x*/
table-layout:fixed;
}
thead {
display:table;
width: calc(100% - 17.5px);/*thead Width - (Scrollbar width + border Width) */
table-layout:fixed;
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</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
I have a table that can slide left or right when the screen is narrow enough. The first column is positioned absolute so that it is always visible.
Is it possible to make the cells in the first column maintain the size of the cells in the other columns? I am not sure how to achieve this while keeping the first column frozen.
Here is a fiddle to my code: http://jsfiddle.net/ta945/
Here's the HTML and CSS
HTML:
<div>
<table>
<thead>
<tr>
<th class="sticky">Name</th>
<th>Helpful Services</th>
<th>State</th>
<th>City</th>
<th>Phone</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">First Name</td>
<td>Math</td>
<td>CO</td>
<td>San Francisco</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Second Name</td>
<td>Reading</td>
<td>NY</td>
<td>New York City</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Third Name</td>
<td>Art</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Four Name</td>
<td>Programming</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
width: 100%;
border: 1px solid #000000;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: seperate;
border-spacing: 0;
margin-left: 5em;
}
thead, tbody, tr {
vertical-align: middle;
}
th {
font-weight: bold;
padding: 2px 4px;
background-color: #676767;
color: #FFFFFF
}
td {
padding: 2px 4px;
}
tbody tr:nth-child(even) td {
background-color: #cccccc;
}
.sticky {
position: absolute;
left: 0;
top: auto;
margin-left: 9px;
}