Is it possible to remove the border spacing between the selected rows/cells? i want to remove the spacing between the "content" cells and show it as one row. i tried to add the border-spacing for the selected rows but it doesn't seem to be working
Below is my code
<html>
<head>
<style>
.flex_container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.inner {
height:1000px;
width: 900px;
background-color:#000;
background-size: cover;
color: white;
display: flex;
/* justify-content: center;
align-items: center;
*/
}
.table-border {
border-collapse: separate;
border-spacing: 6px 5px;
table-layout: fixed;
color: white;
font-size: 15px;
display: inline-block;
}
.table-border tr th {
background-color: rgb(255,255,255,0.6);
border-radius: 2px;
padding-right: 35px;
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="inner">
<div class="content-inner">
<table class="table-border">
<tbody>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
<tr style="background:rgba(255, 255, 255, 0.3)">
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Any help will be appreciated.
Thank you
<html>
<head>
<style>
.flex_container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.inner {
height:1000px;
width: 900px;
background-color:#000;
background-size: cover;
color: white;
display: flex;
/* justify-content: center;
align-items: center;
*/
}
.table-border {
border-collapse: separate;
border-spacing: 0px;
table-layout: fixed;
color: white;
font-size: 15px;
display: inline-block;
}
.table-border tr th {
background-color: rgb(255,255,255,0.6);
border-radius: 2px;
padding-right: 35px;
padding-left: 35px;
padding-top: 10px;
padding-bottom: 10px;
border: 5px solid black;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="flex_container">
<div class="inner">
<div class="content-inner">
<table class="table-border">
<tbody>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
<tr style="background:rgba(255, 255, 255, 0.3)">
<td>content</td>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Use border-collapse: collapse;
Use <thead> and <div>s inside your <th> elements
Finally, set margin to your DIV elements in TH
body {
background-color: #000;
color: white;
}
.table-border {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
font-size: 15px;
}
.table-border thead th div {
background-color: rgb(255, 255, 255, 0.6);
border-radius: 2px;
padding: 0.8rem 1.4rem;
margin: 0.3rem;
}
.table-border tbody td {
background: rgba(255, 255, 255, 0.3);
}
<table class="table-border">
<thead>
<tr>
<th>
<div>Heading 1</div>
</th>
<th>
<div>Heading 2</div>
</th>
<th>
<div>Heading 3</div>
</th>
<th>
<div>Heading 4</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
You don't necessarily need <table> You can achieve something similar using regular DIVs, CSS flex or Grid, and the aria-role="table"
Related
.transfers table{
width: 650px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .date{
text-align: center;
}
.transfers .amount{
text-align: right;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
</body>
I am currently trying to make it so ID is on the left side, date is in the centre and amount is on the right side:
However, as you can see from the image below using the CSS code above, the spacing between "Date" and "Amount" is large. Date is clearly not in the centre.
Set for all columns the same width.
.transfers table {
width: 650px;
margin: 0px auto;
border-collapse: collapse;
}
.transfers tr {
border-bottom: 1px solid #cbcbcb;
}
.transfers th {
font-family: "Montserrat", sans-serif;
}
.transfers th, td {
text-align: center;
/* border: none; */
height: 30px;
padding: 3px;
font-size: 20px;
width: 30%;
}
.transfers .id {
text-align: left;
}
.transfers .date{
}
.transfers .amount{
text-align: right;
}
<div class="transfers">
<table border>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">211</td>
<td class='date' >2022-03-29</td>
<td class='amount' >IN: £4.00</td>
</tr>
<tr>
<td class="id">211</td>
<td class='date' >2022-03-29</td>
<td class='amount' >IN: £4.00</td>
</tr>
</tbody>
</table>
</div>
It's not the table that is not centered. Your columns appear with different widths. You could insert width for the largest or all columns to equally distribute the space.
.transfers table{
width: 650px;
margin: 450px auto;
}
.transfers .id{
text-align: center;
width: 33.333333%;
}
.transfers .date {
text-align: center;
width: 33.333333%;
}
.transfers .amount {
text-align: right;
width: 33.333333%;
}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
For more options, you'll find some methods which will help you in Creating 3 Perfectly Equal Columns that take up 100% on the Browser Window Width
.transfers table{
width: 651px;
margin: 450px auto;
border-collapse: collapse;
}
.transfers tr{
border-bottom: 1px solid #cbcbcb;
}
.transfers th{
font-family: "Montserrat", sans-serif;
}
.transfers th, td{
border: none;
height: 30px;
padding: 3px;
font-size: 20px;
}
.transfers .id{
text-align: left;
}
.transfers .date{
text-align: center;
}
.transfers .amount{
text-align: right;
}
td{width:217px;}
<div class="transfers">
<table>
<thead>
<tr>
<th class="id">ID</th>
<th class="date">Date</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style='background-color: blue'>211</td>;
<td class='date' style='background-color: blue'>2022-03-29</td>;
<td class='amount' style='background-color: blue'>IN: £4.00</td>;
</tr>;
</tbody>
</table>
</div>
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 a problem with my fixed header and fixed column table. The header is fixed but the column isn't. So how do I fix this problem? I have tried to give the first column position: fixed but it doesn't work right. If possible without Javascript. (I have tried to find solutions from earlier questions of the same topic but none of those helped me). Here is my Codepen.
body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
max-height: 70px;
position: relative;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h3>World Cup 2018</h3>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th>Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th>Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th>Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th>Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th>Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>
body {
background-image: url(http://absfreepic.com/absolutely_free_photos/small_photos/green-grass-football-lawn-4020x2261_98957.jpg);
}
h3 {
margin: auto;
text-align: center;
padding: 10px;
color: white;
}
.table {
background-color: white;
margin: auto;
width: 600px;
border-collapse: separate;
display: block;
overflow-x: scroll;
}
thead,
tbody {
display: inline-block;
}
thead {
position: sticky;
top: 1px;
z-index: 9999;
}
tbody {
height: 80px;
}
th {
background-color: lightgrey;
}
td,
th {
min-width: 100px;
max-width: 100px;
word-wrap: break-word;
}
.fixed {
position: sticky;
width: 5em;
left: 0;
top: auto;
z-index: 999;
}
td:not(.fixed) {
z-index: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="conatiner">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="6">Europe</th>
<th colspan="3">South-America</th>
<th colspan="2">Asia</th>
</tr>
<tr>
<th class="fixed">Countries</th>
<th>Germany</th>
<th>Spain</th>
<th>Portugal</th>
<th>France</th>
<th>England</th>
<th>Croatia</th>
<th>Argentina</th>
<th>Brazil</th>
<th>Colombia</th>
<th>Japan</th>
<th>Russia</th>
</tr>
</thead>
<tbody>
<tr>
<th class="fixed">Goalkeeper</th>
<td>Neuer</td>
<td>De Gea</td>
<td>Beto</td>
<td>Lloris</td>
<td>Butland</td>
<td>Subasic</td>
<td>Caballero</td>
<td>Alisson</td>
<td>Ospina</td>
<td>Kawashima</td>
<td>Lunev</td>
</tr>
<tr>
<th class="fixed">Defender</th>
<td>Boateng</td>
<td>Ramos</td>
<td>Pepe</td>
<td>Varane</td>
<td>Walker</td>
<td>Lovren</td>
<td>Otamendi</td>
<td>Marcelo</td>
<td>Sanchez</td>
<td>Makino</td>
<td>Granat</td>
</tr>
<tr>
<th class="fixed">Midfielder</th>
<td>Kroos</td>
<td>Iniesta</td>
<td>Ronaldo</td>
<td>Tolisso</td>
<td>Lingard</td>
<td>Modric</td>
<td>Messi</td>
<td>Paulinho</td>
<td>Rodriguez</td>
<td>Honda</td>
<td>Golovin</td>
</tr>
<tr>
<th class="fixed">Forward</th>
<td>Gomez</td>
<td>Asensio</td>
<td>Quaresma</td>
<td>Griezmann</td>
<td>Welbeck</td>
<td>Perisic</td>
<td>Dybala</td>
<td>Neymar</td>
<td>Bacca</td>
<td>Osako</td>
<td>Smolov</td>
</tr>
</tbody>
</table>
</div>
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>
Hello for some reason I have a button that is breaking the bottom border that I have already set in place for my table. I eventually want to do this for all of my rows, but I would like to know how to prevent that from happening. Each row in my table should have a button, but I'd like to keep my borders intact.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
So, you must put button into td, because it's in table, but you're applying the border-bottom property to td so you have border under button, if you want to remove it you can add a class no-border and apply it to td in which you have your button so look at code, and you'll have only two columns have border, or another solution is to add <td></td> or <th></th> where appropriate into every <tr>that has no button.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
.no-border{
border:none;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td class="no-border"><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>
Problem: Uneven number of column inside each row.
Solution: Either enter blank <td></td> or use colspan.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td colspan="2">$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>