I have a task to make this table:
I have 2 problems:
box-shadow is not visible at the edges due to overflow: auto
when i scrolling table, border radius disappears and I don't know how to save it.
I am trying to do this with display: grid, but didn't achieve any result.
Here is my code now:
body {
padding: 0.5rem;
background: #edeff5;
}
table {
overflow-x: auto;
display: inline-block;
border-collapse: separate;
border-spacing: 0 0.25rem;
overflow-x: auto;
width: 50rem;
position: relative;
}
thead,
tbody {
min-width: 100%;
}
tr {
box-shadow: 0px 4px 10px rgba(77, 92, 127, 0.16);
border-radius: 10px;
}
th:first-child,
td:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
th:last-child,
td:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
th,
td {
vertical-align: middle;
box-sizing: border-box;
background: white;
padding: 1rem 1rem;
color: #526092;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: start;
}
<body>
<table>
<thead>
<tr>
<th>Пользователи</th>
<th>Ролевая модель</th>
<th>Вложения</th>
<th>Новости</th>
<th>Настройки почтовых уведомлений</th>
<th>Настройки внутренних уведомлений</th>
<th>Настройки прав</th>
<th>Опросы</th>
<th>Пользователи</th>
</tr>
</thead>
<tbody>
<tr>
<td>user</td>
<td>first role 999999999999 </td>
<td>attachments</td>
<td>news</td>
<td>emailNotificationSettings</td>
<td>eventNotificationSettings</td>
<td>permissions</td>
<td>polls</td>
<td>user</td>
</tr>
<tr>
<td>user</td>
<td>second role 999999999999 </td>
<td>attachments</td>
<td>news</td>
<td>emailNotificationSettings</td>
<td>eventNotificationSettings</td>
<td>permissions</td>
<td>polls</td>
<td>user</td>
</tr>
</tbody>
</table>
</body>
my codepen
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
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>
I use :nth-child(odd/even) selector to make different background for table rows for better readability. And now I have to set "border-spacing" or "border-color: transparent" for my table, to make background visible thru the space between cells. The problem is, that horizontal spacing should be different for different columns - the last column should have larger spacing than whole table (marked with red in the sample below).
How can I do that? Have no idea. Please help. Thank you!
body
{
background: #3a7;
}
table
{
border-collapse: separate;
border-spacing: 5px;
border: 0px solid #ffffff;
margin: 1em;
table-layout: fixed;
}
td
{
font-size: 1rem;
empty-cells: show;
/*background: white;*/
padding: 0;
}
td.last
{
font-size: 1rem;
empty-cells: show;
/*background: white;*/
/*border-left: 20px transparent;*/
border-left: 20px solid rgba(255,0,0,0.5);
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #fff;
color: #000;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #000;
color: #fff;
border: 0px solid transparent;
overflow: visible;
}
input
{
border: 0px;
outline: 0px transparent;
background-color: transparent;
color: inherit;
margin: 5px;
}
<table>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
</table>
This should work
body {
background: #3a7;
}
td.last {
font-size: 1rem;
empty-cells: show;
}
tr:nth-child(odd) {
padding: 0px;
color: #000;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even) {
padding: 0px;
margin: 0;
color: #fff;
border: 0px solid transparent;
overflow: visible;
}
input {
border: 0px;
outline: 0px transparent;
background-color: transparent;
color: inherit;
margin: 5px;
}
tr:nth-child(odd) div {
background: white;
}
tr:nth-child(even) div {
background: black;
}
.last > div {
margin-left: 20px;
}
<table>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td class="last"><div><input></div></td>
</tr>
</table>
Another option is to set the last cell's background to none and instead color the background of the input field and its border:
https://jsfiddle.net/e1fnoa34/
You could make the last cell background: none, and give it padding-left: 20px. Then wrap the cell's content in a DIV or SPAN and apply the background styling to the inner wrapper instead.
Not ideal, but unfortunately you can't vary the with of the table cell spacing, and margin is ignored for table cells.