Line 5 in the CSS removed all of the overlapping or thickened lines but through the middle, the line is still thick and at the start of the 2nd column as you can see in the picture but it isn't in the tutorial I'm watching. Why?
/* table styles */
table {
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
}
table th {
text-align: left;
background-color: darkseagreen;
color: white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
table th,
table td {
border: 1px solid black;
}
/* end table styles */
<table>
<thead>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oranges</td>
<td>5</td>
<td>$3.00</td>
</tr>
<tr>
<td>Celery</td>
<td>10</td>
<td>$5.00</td>
</tr>
<tr>
<td>Garlic</td>
<td>15</td>
<td>$13.00</td>
</tr>
<tr>
<td>Marbles</td>
<td>12</td>
<td>$23.00</td>
</tr>
<tr>
<td>VERY LONG ITEM THAT MAKES THE HEADER GO BRR</td>
<td>4</td>
<td>$40.00</td>
</tr>
</tbody>
</table>
Related
I currently have a table with my content in but it looks like
I would like it to have space between each row to make them distinctively separate and look something like this
I have tried using padding on my td elements and border spacing on my tr elements. What would be the easiest way to do this within bootstrap 5? Below is my HTML and CSS
.icon-green {
color: green;
}
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
I think you already fixed most of your own problem except that because everything is white, it's hard to see that there is space between the rows. Added a slight box shadow on the rows. I'm not sure how you are using bootstrap here though, but I assume it's similar if you want to override bootstrap styles
table {
border-collapse: separate;
border-spacing: 0px 15px;
}
tr{
/* only added this line */
box-shadow:0px 1px 2px 3px rgba(0, 0, 0, 0.142);
}
th,
td {
width:100%;
background-color:white;
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
There are limited things you can do with tr elements. You can use box-shadow and outline on them as below. Note, I've had to add a class to your table so I can increase the specificity of the rule that causes the table not to collapse.
.icon-green {
color: green;
}
/* note the added class, if you use just 'table' as the selector bootstrap will override it and collapse your table */
table.mytable {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 10px;
}
tr {
border-radius: 0.25rem;
outline: 1px solid #cccccc;
box-shadow: 10px 10px 10px 0px #d0d0d0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<table class='mytable'>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
My HTML:
<table style="width:100%">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
My CSS:
table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;
}
th, td {
padding:15px;
}
th {
text-align:left;
border-collapse:collapse;
}
I want to collapse the borders of the TH only, but it's not working. Border collapse and border spacing aren't working when i target only the TH. I can change the background color and the padding and do other changes to TH only, but border changes seems to not work. Why is that?
Note: Before you tell me how it can be done using other ways, please tell me why THIS way isn't working.
Because border-collapse is a style rule of the table and not of the single cells (td or th). This means that you set it on the table element and all the borders in the table will collapse or separate.
You can mimic the behavior of border-collapse: separate only in td by doing something "hacky" like inserting a div inside tds. Check out the fiddle below:
table {
border-collapse: collapse;
}
th {
border: 1px solid black;
}
td {
padding: 2px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
td > div {
height: 100%;
width: 100%;
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>Cell 1</div></td>
<td><div>cell 2</div></td>
</tr>
<tr>
<td><div>Cell 3</div></td>
<td><div>Cell 4</div></td>
</tr>
</tbody>
</table>
as everybody told you , border-collapse is a rule set for the whole table, it tells how cells should be printed at screen side by sides.
A work around could be to fake borders with a box-shadow.
inside tds :
table {
border-collapse: collapse;
}
th {
border: solid 2px;
box-shadow: inset 0 -2px;
}
td {
border: solid transparent;
box-shadow: inset 0 0 0 2px;
padding:3px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
outside th
thead {
padding-bottom: 2px;
}
th {
border: 0;
box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
padding: 2px;
}
td {
border: solid 2px;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr>
</tbody>
</table>
The border-collapse property can only be applied to <table> elements - not individual rows or cells
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
I have a table that is controlled by a style sheet.
the table has been created from a poster which my boss wants it to look like. the problem i am having is on the poster there is a gap between two of the columns.
I have tried just putting two tables side by side however this caused me issues if viewed on a mobile devise, so i tried to add a column that had a border left and right and the same colour background as the rest of the page but i cant get rid of the top/bottom borders that are in place from the style sheet.
Style sheet.
.table__container {
overflow-x: scroll;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 0px dashed #DDD;
}
table tr th {
color: #88B53D;
}
table tr th, table tr td {
vertical-align: top;
}
.row__header {
border-top: 3px solid #DDD;
}
.row__header--day {
font-size: 1em;
text-transform: uppercase;
}
CSS on page
.nothing {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-top: 0px;
border-bottom: 0px;
background-color: #eee;
}
HTML table
<div class="table__container">
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
<td class="nothing">Gap should be here</td>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="row__header" style="text-align:center;">
<th class="row__header--day"></th>
<td></td>
<td></td>
<td class="nothing">Gap should be here</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
The style sheet was provided to me as part of our branding so i cant mess with it too much.
Is this the expected result? If yes then I will add some explanation.
.table__container {
height: 100%;
width: 100%;
}
table tr td.gap{
width:40%;
text-align:center;
border:none;
}
table tr td{
border:1px solid #000
}
<div class="table__container">
<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.
Here is my CSS code for table:
table.t_data
{
/* border: 1px; - **EDITED** - doesn't seem like influences here */
background-color: #080;
border-spacing: 1px;
margin: 0 auto 0 auto;
}
table.t_data thead th, table.t_data thead td
{
background-color: #9f9;
/* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */
padding: 5px;
margin: 1px;
}
table.t_data tbody th, table.t_data tbody td
{
background-color: #fff;
/* border: #080 0px solid; - **EDITED** - doesn't seem like influences here */
padding: 2px;
}
I need to display the following HTML:
<table class="t_data">
<thead style="padding:1px">
<tr>
<th>#</th>
<th>Team</th>
<th>Stadium Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Team 1</td>
<td>Name 1</td>
<td>Size 1-1, 2-1, 3-1</td>
</tr>
<tr>
<td>2</td>
<td>Team 1</td>
<td>Name 1</td>
<td>Size 1-1, 2-1, 3-1</td>
</tr>
<tr>
<td>3</td>
<td>Team 1</td>
<td>Name 1</td>
<td>Size 1-1, 2-1, 3-1</td>
</tr>
</tbody>
</table>
It display perfect (as expected) table in Mozilla Firefox and in IE8:
But there are issues in other browsers/modes:
In Chrome the line between head and body is double width:
In IE8 (switched into IE7 compatibility mode) all lines are double width:
Question: what are CSS options to make each line boldness same (1px)?
table.t_data { border-collapse:collapse }