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>
Related
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>
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.
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>
I have created a table however I cannot get the <thead>s to line up with the <tbody>s.
The table is responsive and works as I want it to when resized, however it's the initial screen size that is the issue.
I have added float:left to the <thead>s so they align properly instead of overlapping each other and would like the table data to a-line in the same way.
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table td {
font-size: 0.60em;
}
table th {
font-size: .60em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
#table-wrapper {
position: relative;
}
#table-scroll {
overflow: auto;
}
#table-wrapper table {
width: 100%;
}
#table-wrapper table * {
color: black;
font-size: 12px;
}
#table-wrapper table thead th .text {
text-align: center;
}
}
<div class="col-12 offset-0">
<div style="overflow-x:auto">
<div id="table-wrapper">
<div id="table-scroll">
<table class="table table-striped" border="0" cellspacing="0" cellpadding="0" align="center">
<h4>Success Stream</h4>
<thead style="float:left">
<tr>
<th scope="col">Year</th>
<th scope="col">{{n1}}'s age</th>
<th scope="col">{{n2}}'s age</th>
<th scope="col">Income</th>
<th scope="col">Personal Contribution to Pension</th>
<th scope="col">Company Contribution to Pension</th>
<th scope="col">Personal Contribution to ISA</th>
<th scope="col">Expenses</th>
<th scope="col">Cash Flow</th>
<th scope="col">Growth of Pension</th>
<th scope="col">Growth of ISA</th>
<th scope="col">Growth of Other</th>
<th scope="col">Withdrawals from Pension</th>
<th scope="col">Withdrawals from ISA</th>
<th scope="col">Withdrawals from Other</th>
<th scope="col">Pension Total</th>
<th scope="col">ISA Total</th>
<th scope="col">Other Total</th>
<th scope="col">Full Total</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Year"> 2018</td>
<td data-label="{{n1}}'s age">55</td>
<td data-label="{{n2}}'s age">55</td>
<td data-label="Income">57,000</td>
<td data-label="Personal Contribution to Pension">5,000</td>
<td data-label="Company Contribution to Pension">0</td>
<td data-label="Personal Contribution to ISA">0</td>
<td data-label="Expenses">50,500</td>
<td data-label="Cash Flow">1,500</td>
<td data-label="Growth of Pension">57,737</td>
<td data-label="Growth of ISA">0</td>
<td data-label="Growth of Other">0</td>
<td data-label="Withdrawals from Pension">0</td>
<td data-label="Withdrawals from ISA">0</td>
<td data-label="Withdrawals from Other">0</td>
<td data-label="Pension Total">862,737</td>
<td data-label="ISA Total">1</td>
<td data-label="Other Total">1,501</td>
<td data-label="Full Total">864,239</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Instead of using float:left for thead just change
table {
table-layout: fixed;
}
to
table {
table-layout: auto;
}
I'm working on a stats table for soccer(Football) games.
The table consists of the following columns (from left to right):
icon
text (what happend)
minute
text (what happend)
icon
The icon & minute columns should have a static with (50px & 80px). The text columns should be variable in width.
Now to the tricky part... if the table has a text column with content and one without in the same row the minute column isn't centered anymore. See:
That's how it should look like:
Here is the code:
<table class="table-comparison">
<thead>
<th colspan="5">
Wechsel
</th>
</thead>
<tbody>
<tr>
<td class="column-action"><i class="icon-rotate-left"></i></td>
<td class="column-text text-right">
<i class="icon-caret-right color-green"></i> Sradan Lakic für <i class="icon-caret-right color-red-light"></i> Stefan Aigner
</td>
<td class="column-center" data-toggle="move:insertBefore" data-target="$el.parent().find('td:first-child')">46'</td>
<td class="column-text">
<div>
<i class="icon-caret-right color-green"></i> Mario Götze für <i class="icon-caret-right color-red-light"></i> Toni Kroos
</div>
<div>
<i class="icon-caret-right color-green"></i> Emre Can für <i class="icon-caret-right color-red-light"></i> Thiago Alcantara
</div>
</td>
<td class="column-action"><i class="icon-rotate-left"></i></td>
</tr>
<tr>
<td class="column-action"><i class="icon-rotate-left"></i></td>
<td class="column-text text-right">
<i class="icon-caret-right color-green"></i> Sebastion Jung für <i class="icon-caret-right color-red-light"></i> Marco Russ
</td>
<td class="column-center" data-toggle="move:insertBefore" data-target="$el.parent().find('td:first-child')">88'</td>
<td class="column-text"></td>
<td class="column-action"></td>
</tr>
</tbody>
</table>
and the css:
// ------------------------------
.table-comparison {
color: #black;
width: 100%;
th, td {
padding: 10px 0;
}
th {
.interstate;
.uppercase;
color: #black;
font-size: 14px;
padding-top: 0;
padding-bottom: 15px;
#media #tablet {
padding-bottom: 35px;
text-align: center;
}
}
.column-action {
padding-left: 20px;
padding-right: 20px;
text-align: center;
width: 20px;
#media #phone {
display: none;
}
}
.column-text {
padding-left: 20px;
padding-right: 20px;
#media #phone {
display: block;
height: auto;
text-align: left;
width: 100%;
}
}
.column-center {
.interstate;
text-align: center;
width: 80px;
#media #phone {
display: block;
height: auto;
padding-left: 20px;
text-align: left;
width: 100%;
}
#media #tablet {
border-left: 1px solid #grey-medium;
border-right: 1px solid #grey-medium;
}
}
// stripe that shit down
// stripe down the tables
> tbody > tr:nth-child(even) > td,
> tbody > tr:nth-child(even) > th {
background-color: #f7f7f7;
}
> tbody > tr:nth-child(odd) > td,
> tbody > tr:nth-child(odd) > th {
background-color: transparent;
}
}
use table-layout:fixed; that way, the column that did't get specific width, will 'divide' the rest of the width evenly between them.
Working Fiddle
CSS
.table-comparison
{
width: 100%;
table-layout: fixed;
}
.iconColumn
{
width: 50px; /*fixed width*/
}
.textColumn
{
/*you dont have to fix the width*/
}
.minuteColumn
{
width: 80px; /*fixed width*/
}
/* this part is taken from gvee's solution*/
.table-comparison tr td:first-child, .table-comparison tr td:last-child {
color: red;
background-color: #ddd;
text-align: center;
}
.table-comparison tr td:nth-child(3) {
background-color: lime;
text-align: center;
}
HTML
<table class="table-comparison">
<thead>
<th class='iconColumn'></th>
<th class='textColumn'></th>
<th class='minuteColumn'></th>
<th class='textColumn'></th>
<th class='iconColumn'></th>
</thead>
<tbody>
<tr>
<td><i>i</i></td>
<td></td>
<td>46'</td>
<td>
<div> <i>G</i>Mario Götze für<i>R</i>Toni Kroos</div>
<div> <i>G</i> Emre Can für <i>R</i> Thiago Alcantara</div>
</td>
<td><i>i</i>
</td>
</tr>
<tr>
<td><i>i</i>
</td>
<td></td>
<td>88'</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>