Hey guys im trying to figure out why my table keeps doing this when I switch to the mobile version, ive tried multiple different CSS edits to fix it, but whenever I got into mobile it shows like this
Table in mobile
Try this Modified some styles and added width to the <th> tags.
CSS:
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
font-size:13px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
th, td {
padding: 8px;
text-align: center;
}
table#t01 tr:nth-child(even) {
background-color: #fff;
}
table#t01 tr:nth-child(odd) {
background-color: #eee;
}
table#t01 th {
background-color: #eee;
}
TABLE:
<table id="t01">
<tr>
<th>Size</th>
<th>Bust</th>
<th>Sleeve</th>
<th width="20%">Shoulder</th>
<th width="15%">Length</th>
</tr>
<tr>
<td>S</td>
<td>102</td>
<td>61</td>
<td>45</td>
<td>37</td>
</tr>
<tr>
<td>M</td>
<td>106</td>
<td>62</td>
<td>46</td>
<td>38</td>
</tr>
<tr>
<td>L</td>
<td>110</td>
<td>63</td>
<td>47</td>
<td>39</td>
</tr>
</table>
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>
I have a table that gets added dynamically to my webpage.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable th {
background-color: black;
color: white;
}
I want to make it scrollable with the header fixed.
I can make the whole table scrollable by adding this code in CSS-
tbody {
display:block;
overflow-y:scroll;
height:100px;
}
But this makes the whole table scrollable; the header doesn't stay fixed. Also, the table has a border, how can I get rid of it?
Here you go jsfiddle
<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
</table>
<div class="tb">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>01</td>
<td>$100</td>
</tr>
<tr>
<td>02</td>
<td>$80</td>
</tr>
<tr>
<td>03</td>
<td>$100</td>
</tr>
<tr>
<td>04</td>
<td>$80</td>
</tr>
<tr>
<td>05</td>
<td>$100</td>
</tr>
<tr>
<td>06</td>
<td>$80</td>
</tr>
</tbody>
</table>
</div>
</body>
CSS
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable th {
background-color: black;
color: white;
}
.tb {
height: 100px !important;
overflow: auto;
}
I'm trying to style table with what I thought would be a fairly simple style to achieve but have run in to a little issue.
The table will show a coloured indicator on the left hand side of each row so I'm using border-left: 5px solid red; to add it. However, although the border applies - half of it is inside the row and half outside. I've tried adding border-collapse: collapse to no avail, I'm also using box-sizing: border-box but still have the same issue.
Finally, I've also tried adding the border to the first-child cell (td) but the same issue appears.
I've set up an example of what's happening - I've put in an oversized border to highlight the issue:
http://www.cssdesk.com/TVa67
Has anyone run into this before or have any solutions?
body {
background: blue;
}
table {
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
width: 100%;
}
th,
td {
background-color: #fff;
padding: 10px 15px 8px;
}
th {
border-bottom: 1px solid blue;
font-weight: normal;
text-align: left;
}
td {
border-bottom: 1px solid gray;
}
tr.low {
border-left: 25px solid red;
}
<table style="
border-collapse: collapse;
">
<tbody>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
<tr class="low">
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
However, although the border applies - half of it is inside the row
and half outside
This behaviour is expected and is as per specs. Refer to: http://www.w3.org/TR/CSS2/tables.html#collapsing-borders where it says:
Borders are centered on the grid lines between the cells...
It also illustrates that with a diagram with description.
Has anyone run into this before or have any solutions?
Yes, it can be easily demonstrated as in this fiddle: http://jsfiddle.net/abhitalks/xs7L9wn1/1/ and the below Snippet:
* { box-sizing: border-box; }
table {
border-collapse: collapse;
border: 1px solid gray;
table-layout: fixed; width: 70%;
margin: 0 auto;
}
th, td {
border: 1px solid gray;
padding: 6px;
text-align: center;
}
tbody > tr:nth-child(1) > td:first-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:first-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:first-child { border-left: 24px solid blue; }
tbody > tr:nth-child(1) > td:last-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:last-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:last-child { border-left: 24px solid blue; }
<table>
<thead>
<tr>
<th>#</th>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Caption</td>
<td>Description</td>
</tr>
<tr>
<td>2</td>
<td>Caption</td>
<td>Description</td>
</tr>
<tr>
<td>3</td>
<td>Caption</td>
<td>Description</td>
</tr>
</tbody>
</table>
Solution:
Just add a transparent border of the same width to all rows. That way the border-width will be same and it will neatly align. (Update: added a white border-left to first column to hide the hanging border on highlighted cell. As pointed out by your comment.)
th, td { border-left: 15px solid transparent; }
tr > td:first-child, tr > th:first-child { border-left: 5px solid #fff; }
tr.low > td:first-child { border-left: 5px solid red; }
Example Fiddle: https://jsfiddle.net/abhitalks/s9taanz7/5/
Snippet:
* { box-sizing: border-box; }
body { background-color: blue; }
table {
border-collapse: collapse;
table-layout: fixed; width: 100%;
}
th, td {
background-color: #fff;
padding: 10px 15px 8px 8px;
border-left: 5px solid transparent;
border-bottom: 1px solid gray;
}
th {
border-bottom: 1px solid blue;
font-weight: normal; text-align: left;
}
tr > td:first-child, tr > th:first-child { border-left: 10px solid #fff; }
tr.low > td:first-child { border-left: 10px solid red; }
<table>
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="low">
<td>2</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="">
<td>3</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
However, this approach will have a side-effect of hidden border-bottom because the border-left overlaps it.
Solution 2:
You could have an extra cell on the left to use as indicator. You can then control this by use of colgroup. This approach is neater than above and also requires you to have the width specified only once in css.
Example Fiddle 2: http://jsfiddle.net/abhitalks/z7u1nhwt/1/
Snippet 2:
* { box-sizing: border-box; }
body { background-color: blue; }
table {
border-collapse: collapse;
table-layout: fixed; width: 100%;
}
th, td {
background-color: #fff;
padding: 10px 15px 8px 8px;
border-bottom: 1px solid gray;
}
th {
border-bottom: 1px solid blue;
font-weight: normal; text-align: left;
}
.col1 { width: 10px; }
tr.low > td:first-child {
background-color: #f00;
}
<table>
<colgroup>
<col class="col1" />
<col class="coln" span="6" />
</colgroup>
<thead>
<tr>
<th></th>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="">
<td></td>
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="low">
<td></td>
<td>2</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="">
<td></td>
<td>3</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
And of course, you can also try the approach of using pseudo-element as proposed by #misterManSam, depending on ease of implementation for you.
Below is a small simple table as an example. I want the header row to be of one color (grey). The alternate rows below header to be of another color (yellow). And the first column of another color (orange).
I am not able to achieve the desired results with the CSS. How do I go about it without individually coloring the cells.
Code in JSFiddle
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
table {
width: 100%;
}
th {
background-color: grey;
color: white;
}
tr:nth-child(odd) {
background-color: yellow;
}
<table>
<col style="background-color: orange;" />
<tr>
<th> </th>
<th>Bank</th>
<th>Amount</th>
</tr>
<tr>
<td>John</td>
<td>ABC</td>
<td>12345</td>
</tr>
<tr>
<td rowspan="2">David</td>
<td>DEF</td>
<td>456789</td>
</tr>
<tr>
<td>GHI</td>
<td>147258</td>
</tr>
<tr>
<td>Kevin</td>
<td>JKL</td>
<td>258369</td>
</tr>
<tr>
<td>Mike</td>
<td>MNO</td>
<td>369258</td>
</tr>
</table>
It's not a very good solution but here is a fix:
http://jsfiddle.net/sthmw0dk/2/
I have added the following lines:
tr td:first-child
{
background-color: orange;
}
tr:nth-child(even) td:nth-last-child(2)
{
background-color: white;
}
tr:nth-child(odd) td:nth-last-child(2)
{
background-color: yellow;
}
The last selector is necessary when you change your rowspan to 3 or more.
I would however suggest using classes for your first column. It will be a lot easier a better when you want to use more columns in the future.
demo - http://jsfiddle.net/victor_007/sthmw0dk/3/
The only thing i have changed is styling td instead of tr with background-color
Using td:not(:first-child) the first-child of tr will not get any styling
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
}
table {
width: 100%;
}
th {
background-color: grey;
color: white;
}
.first-col {
background-color: orange;
}
tr:nth-child(odd) td:not(:first-child) {
background-color: yellow;
}
<table>
<colgroup>
<col class="first-col" />
</colgroup>
<tr>
<th> </th>
<th>Bank</th>
<th>Amount</th>
</tr>
<tr>
<td>John</td>
<td>ABC</td>
<td>12345</td>
</tr>
<tr>
<td rowspan="2">David</td>
<td>DEF</td>
<td>456789</td>
</tr>
<tr>
<td>GHI</td>
<td>147258</td>
</tr>
<tr>
<td>Kevin</td>
<td>JKL</td>
<td>258369</td>
</tr>
<tr>
<td>Mike</td>
<td>MNO</td>
<td>369258</td>
</tr>
</table>
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;
}