I've got a table that I'm trying to style. I wanted to have a bottom-border underneath the thead and each tr but no matter what I put, it just won't apply. I even tried setting a color for the thead but that wouldn't give either. Any ideas what I'm doing wrong?
.border-bottom {
border-collapse: collapse;
border-bottom: 2px solid #CCD5DE;
}
table {
width: 100%;
max-height: 500px;
overflow: scroll;
}
thead {
color: red;
}
th {
font-weight: 700;
font-size: 20px;
letter-spacing: 1px;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
}
td {
font-weight: 400;
font-size: 18px;
letter-spacing: .75px;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
}
<div class="spaced-div">
<table>
<thead class="bottom-border">
<tr>
<th>Date</th>
<th>Stock</th>
<th>Quantity</th>
<th>Price</th>
<th>Fees</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td>March 21, 2020</td>
<td>DMC</td>
<td>1,330</td>
<td>5.71</td>
<td>23.54</td>
<td>7,617.84</td>
</tr>
</tbody>
</table>
</div>
There are two major issues here,
1) Css property border-collapse: collapse; should be under table element like,
table {
width: 100%;
max-height: 500px;
overflow: scroll;
border-collapse: collapse;
}
2) Make sure you are having the same class name .border-bottom for both thead and tbody tr .
.border-bottom {
border-bottom: 2px solid #CCD5DE;
}
table {
width: 100%;
max-height: 500px;
overflow: scroll;
border-collapse: collapse;
}
thead {
color: red;
}
th {
font-weight: 700;
font-size: 20px;
letter-spacing: 1px;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
}
td {
font-weight: 400;
font-size: 18px;
letter-spacing: .75px;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
}
<div class="spaced-div">
<table>
<thead>
<tr class="border-bottom">
<th>Date</th>
<th>Stock</th>
<th>Quantity</th>
<th>Price</th>
<th>Fees</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
<tr class="border-bottom">
<td>March 21, 2020</td>
<td>DMC</td>
<td>1,330</td>
<td>5.71</td>
<td>23.54</td>
<td>7,617.84</td>
</tr>
</tbody>
</table>
</div>
Related
I'm building a very basic test website in HTML, and I'm learning how to put borders on table cells. I have a problem, I'm trying to round the borders in my table but I just get rounded cells (td and th), but not the table itself.
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
border-collapse: collapse;
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
I even tried doing the following to see if there were any changes:
table {
border-radius: 45px;
}
the,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
font-family: arial;
padding: 11px;
}
But all the borders remain squares.
I think that has something to do with collapsing the border.
Try to remove this line
border-collapse: collapse;
table,
th,
td {
text-align: center;
width: 30%;
border: 5px solid aqua;
/* border-collapse: collapse; *//* remove this line */
border-radius: 45px;
font-family: arial;
padding: 11px;
}
th {
color: white;
font-family: impact;
}
td {
color: yellow;
}
tr:nth-child(odd) {
background-color: darkblue;
}
<table align=c enter>
<tr>
<th>Choncho</th>
<th>Klokin</th>
<th>Fetuc</th>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>papas</td>
<td>refrescos</td>
<td>tingas</td>
</tr>
</table>
Then use padding and margin to control the spacing if needed
Trying to use power automate to create tables and add styling to them in the body of an email. The last part of my project involves getting the first column of the table (name column) to have an orange background but I cannot seem to get the CSS working for this.
Style sheet:
<style>
table{
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td, th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
table tr td:nth-child(1)
{
background-color: orange;
}
</style>
HTML output from PowerBI's HTML table action:
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td> <-- this column needs to be orange
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
You can try something like this:
table {
border: 2px solid #C1C1C1;
background-color: #FFFFFF;
width: 400px;
text-align: center;
border-collapse: collapse;
}
table td,
th {
border: 1px solid #555555;
padding: 5px 10px;
}
table tbody td {
font-size: 12px;
font-weight: bold;
color: #000000;
}
table thead {
background: #737373;
}
table thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
tbody tr td:first-child {
background-color: orange;
}
<table>
<thead>
<tr>
<th></th>
<th>Sunday^10/30/2022</th>
<th>Monday^10/31/2022</th>
<th>Tuesday^11/1/2022</th>
<th>Wednesday^11/2/2022</th>
<th>Thursday^11/3/2022</th>
<th>Friday^11/4/2022</th>
<th>Saturday^11/5/2022</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Rest Day</td>
<td>Vacation</td>
<td>Vacation</td>
<td>Office</td>
<td>Remote</td>
<td>Office</td>
<td>Rest Day</td>
</tr>
</tbody>
</table>
So you can use the nth-child, this is gonna be helpful
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child?retiredLocale=de
I have a table in this format:
.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}
<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>
There is a border-radius property on the table, however it's not applying. I have been looking up and all I can find is set border-collapse as separate, but that didn't do it either. Any help?
Add overflow: hidden to table.
.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
overflow: hidden;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}
<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>
Actually it is applied, but overflows it outside. We can see that by adding border to table in the below snippet. That's why we should add overflow: hidden
.main-table {
margin-top: 1vw;
margin-left: 1vw;
height: 30vw;
overflow-y: auto;
overflow-x: hidden;
}
table {
border-collapse: separate;
border-radius: 3vw;
border-spacing: 0;
margin-top: 1vw;
width: 87vw;
border: 2px solid red;
}
td,
th {
border: none;
}
th {
height: 2vw;
background: #deb724;
font-weight: bold;
}
td {
height: 3vw;
background: white;
text-align: center;
}
tr td:hover {
background: #d5d5d5;
}
<div class="main-table">
<table>
<thead>
<tr>
<th> Hello </th>
<th> World </th>
</tr>
</thead>
<tbody>
<tr>
<td> Wow look </td>
<td> What is this </td>
</tr>
</tbody>
</table>
</div>
I have no access to change core HTML, only CSS, but the tables I am working with have a weird gap in the corners that I am trying to fix.
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
}
.heading-row {
background: #0093c9;
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
}
th,
td {
padding: 10px;
text-align: left;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Does turning the whole table and div background into the color and the tbody back to white do the trick?
.tabular-container {
background: #0093c9;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
tbody{
background: white;
}
.tabular-container {
border: 2px solid #0093c9;
border-radius: 8px;
overflow: hidden;
box-sizing: border-box;
background: #0093c9;
}
.heading-row th{
font-weight: bold;
}
table {
font-family: Arial;
width: 100%;
border-collapse: collapse;
background: white;
overflow-x: hidden;
background: #0093c9;
}
th,
td {
padding: 10px;
text-align: left;
}
tbody{
background: white;
}
<div class="tabular-container">
<table class="">
<thead class="">
<tr class="heading-row">
<th colspan="2">Rounded corners table</th>
</tr>
</thead>
<tbody>
<tr class="tabular__row">
<td>kk</td>
<td>kk</td>
</tr>
<tr class="tabular__row">
<td colspan="2">This is a sample table only</td>
</tr>
</tbody>
</table>
</div>
Simple, set: border-radius:0; on your table.
The browser is trying to set the radius of the table's corners to match, but is getting a rounding error. By using radius:0 you are forcing the browser to 'clip' the corner instead.
My goal is to add a bottom white line border under the heading in css as such shown in this picture table image. However the border is not appearing. I was watching and coding along a youtube tutorial on html and css. My results were fine until I reached the part where he added the bottom white line border tutorial video at 1hr34min45sec. When I placed the bottom border, it didn't appear.
Any help would be appreciated
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
In my case, the user-agent style was overriding my css class with border-collapse property. So I had to override it using
table {
border-collapse: collapse;
}
Try to run your code through those validators, specifically:
border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */
https://validator.w3.org/ -- for HTML
https://jigsaw.w3.org/css-validator/ -- for CSS
Try targeting the tr of the thead so the border fills the full width of your table.
thead tr { border-bottom: 1px solid #FFF; }
Okay I checked out your css there are minor errors in it check out
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6; --- should be 1px not 1xp this one here was your main problem this is why the border didn't show up
padding 2px; ----- incorrect should be paddin: 2px;
text-align: center;s --- the s shouldn't be there
}
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
.tile {
width: 170px;
border-radius: 2%;
height: 140px;
padding: 20px;
margin: 5px;
float:left;
}
.tile-double {
width: 390px;
height: 140px;
margin: 5px;
padding: 20;
float: left;
}
.orange {
background-color: #e61860;
}
#user-table {
border-collapse: collapse;
margin: 10px auto;
font-weight: normal;
width: 100%;
}
#user-table th{
border-collapse: collapse;
border-bottom: 1xp solid #F6F6F6;
padding 2px;
text-align: center;s
}
#user-table td{
padding: 2px;
text-align: center;
}
<div class="tile orange tile-double">
<table id="user-table">
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>FruitDealer</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>DongRaeGu</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
<tr>
<td>July</td>
<td>Razor Banshee</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>