This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 11 months ago.
What I want
I want to reduce the .table padding for my th and td's to 5px.
Issues
I have referenced a child class .information-table but .data-table seems to be taking priority even though I have not referenced it.
https://jsfiddle.net/kcfyjdr2/32/
.table {
width:100%;
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #ddd;
}
.table th, td {
text-align: left;
padding: 12px;
}
.table .information-table th, td {
padding: 5px;
}
.table .data-table th, td {
padding: 10px;
}
<table class="table information-table">
<tbody>
<tr>
<td><b>Test Program:</b></td>
<td><b>Report Name:</b></td>
<td><b>Location of Test:</b></td>
</tr>
</tbody>
</table>
How can I fix this and please could I get an explanation?
it's because your selector is
.table .data-table th, td
the issue come from , td it will take each td use in your html
to fix use the selector
.table.data-table th, .table.data-table th td
moreover your selector for information table must be
.table.information-table th, .table.information-table td {
.table {
width:100%;
border-collapse: collapse;
border-spacing: 0px;
border: 1px solid #ddd;
}
.table th, td {
text-align: left;
padding: 12px;
}
.table.information-table th, .table.information-table td {
padding: 5px;
color: blue;
}
.table.data-table th, .table.data-table th td {
padding: 10px;
color: red;
}
<table class="table information-table">
<tbody>
<tr>
<td><b>Test Program:</b></td>
<td><b>Report Name:</b></td>
<td><b>Location of Test:</b></td>
</tr>
</tbody>
</table>
Related
I've been trying to use a Stack Ooverflow answer I've found for rounding table's corners:
/*
table {
border-collapse: collapse;
}*/
table, tr, td, th{
border: 1px solid;
text-align: center;
/*padding: 10px;*/
}
table{
border-spacing: 0;
width: 100%;
display: table;
}
table tr:last-child td:first-child, tr:last-child, table {
border-bottom-left-radius: 25px;
}
table tr:last-child td:last-child, tr:last-child, table {
border-bottom-right-radius: 25px;
}
table tr:first-child th:first-child, tr:first-child, table {
border-top-left-radius: 25px;
}
table tr:first-child th:last-child, tr:first-child, table {
border-top-right-radius: 25px;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>
This works fine. But if I uncomment border-collapse, the rounding disappears. If I uncomment padding: 10px, it would double the border:
I need the border-collapse to avoid bold inner borders. I need padding so that text in table cells had distance from its borders. How do I achieve it while having a rounded outer borders?
JSFiddle: https://jsfiddle.net/eszuhvxj/1/
you can remove top and right border on td:
table {
border-collapse: separate;
border:none;
border-spacing: 0;
width: 30em;
--radius-border: 15px;
}
table td, table th {
border: 1px solid;
text-align: center;
padding: 10px;
}
table td {
border-top: none;
}
table tr:last-child td:first-child{
border-bottom-left-radius: var(--radius-border);
}
table tr:last-child td:last-child {
border-bottom-right-radius: var(--radius-border);
}
table tr:first-child th:first-child {
border-top-left-radius: var(--radius-border);
}
table tr:first-child th:last-child {
border-top-right-radius: var(--radius-border);
}
table tr th:not(:last-child),
table tr td:not(:last-child) {
border-right: none;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>
Here is the solution:
table {
border-spacing: 0;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
text-align:center;
}
/* the first 'th' within the first 'tr' of the 'thead': */
tr:first-child th:first-child {
border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
tr:first-child th:last-child {
border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
<table>
<tr>
<th>Num</th><th>Lett</th><th>Lat</th>
</tr>
<tr>
<td>1</td><td>A</td><td>I</td>
</tr>
<tr>
<td>2</td><td>B</td><td>II</td>
</tr>
<tr>
<td>3</td><td>C</td><td>III</td>
</tr>
</table>
The Table with bad text-alignment
In the Picture u see the table with bad text-alignment. The elements of tbody don't fit to those of thead. It's important that the head of the table is fixed, so you can see it even when you scroll down.
The classes i am using for this table are table-hover and my own class "table_Bookingsystem" which propertys are listed below
.table_Bookingsystem{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 16px;
padding-bottom: 16px;
border: 1px solid #ccc !important;
}
.table_Bookingsystem tbody{
display:block;
width: 100%;
overflow: auto;
}
.table_Bookingsystem thead tr {
display: block;
}
.table_Bookingsystem tr{
border-bottom: 1px solid #ddd;
}
.table_Bookingsystem thead {
background: black;
color:#fff;
}
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
width: 5000px; //important line
}
.table_Bookingsystem tbody tr:nth-child(even) {
background-color: #e4ebf2;
color: #000;
}
<table class="table_Bookingsystem table-hover ">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Auto</th>
<th scope="col">IMEI</th>
<th scope="col">Heimatstadt</th>
<th scope="col">derzeitige Stadt</th>
</tr>
</thead>
<tbody #if(count($cars) > 9) style="height: 300px;" #endif>
#foreach($cars as $car)
<tr class="table-row clickable-row" data-href='/cars/{{$car->id}}'>
<th>{{$loop->iteration}}</th>
<td>{{$car->name}}</td>
<td>{{$car->IMEI}}</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_homeCity)->get('name');
echo $city[0]->name; ?>
</td>
<td>
<?php
$city = Illuminate\Support\Facades\DB::table('cities')->where('id','=', $car->id_currentCity)->get();
echo $city[0]->name; ?>
</td>
</tr>
#endforeach
</tbody>
</table>
When i set the width to 250px it looks a little better but then there is a big edge when i have only 4 or less columns. Is there any way to keep the fixed header and put every -element of directly under the corresponding -element of ?
I write a basic table like you share in screenshot. You have added some extra CSS that's why your table ui disturb.
Step 1 - Remove below CSS, we don't need to block table row.
.table_Bookingsystem thead tr {
display: block;
}
Step 2 - Remove display: block; from table_Bookingsystem tbody
.table_Bookingsystem tbody{
width: 100%;
overflow: auto;
}
Step 3 - I just remove width: 5000px; from .table_Bookingsystem th, .table_Bookingsystem td, if you want apply width: 5000px; on each td/th, revert it.
All Mentioned are applied on below code snippet. Try it I hope it'll help you out. Thanks
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
}
.table_Bookingsystem{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-top: 16px;
padding-bottom: 16px;
border: 1px solid #ccc !important;
}
.table_Bookingsystem tbody{
width: 100%;
overflow: auto;
}
.table_Bookingsystem tr{
border-bottom: 1px solid #ddd;
}
.table_Bookingsystem thead {
background: black;
color:#fff;
}
.table_Bookingsystem th, .table_Bookingsystem td {
padding: 5px;
text-align: center;
}
.table_Bookingsystem tbody tr:nth-child(even) {
background-color: #e4ebf2;
color: #000;
}
<table class="table_Bookingsystem">
<thead>
<tr>
<th>#</th>
<th>Auto</th>
<th>IMEI</th>
<th>Heimatstadt</th>
<th>derzeitige Stadt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Auto</td>
<td>0001</td>
<td>Regensburg</td>
<td>Regensburg</td>
</tr>
<tr>
<td>1</td>
<td>Auto</td>
<td>0001</td>
<td>Regensburg</td>
<td>Regensburg</td>
</tr>
</tbody>
</table>
Try adding text-align: center; to the .table_Bookingsystem tbody rule as it's on the .table_Bookingsystem td rule.
I am trying to place a table inside a bootstrap row but the width of the table keeps jumping across the with of the table. I have added a maximum value of 50% to the width of the table but problem still persists.
this is the css of the table
**EDITTED*****
<div class="col-sm-10" style="min-height:280px">
<div class="panel panel-default">
<div class="panel-body">
<style type="text/css">
table {
max-width: 50%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}
.table thead th {
vertical-align: bottom;
}
.table th {
font-weight: bold;
}
.table th, .table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
}
.table td {
border-top: 1px solid #dddddd;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
</style>
then in my view i have html implementation of the css code in the jsp page
<c:when test="${messageList != null}">
<c:forEach items="${messageList}" var="mesList">
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Message</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>${mesList.message}</td>
<td>${mesList.timestamp}</td>
</tr>
</tbody>
</table>
</div>
</c:forEach>
</c:when>
</div></div></div>
Please how can I place the table into the div row.
The class .table is overriding the styles applied to the table tag. Apply your styles to the class .table rather than applying them to the tag table.
When dealing with stylesheet you always have to remember that they are cascading. The styles of a class will override the styles of the tag the class is applied to.
When your css has no effect it pays off to look in the developer tools of the browser. In Chrome, the styles that are being overridden will be marked out.
I have the following table which inside a model dialog and I have applied some css to, so that the head stays in the same position when its being scrolled.
however after I load the page the columns are pushed to the left, these 5 columns should appear under the headers.
also the underlying page has been pushed to the left of the page also.
<style>
.tblSearchMedia1 tbody {
height: 100px;
overflow: auto;
}
.tblSearchMedia1 td {
padding: 3px 10px;
}
.tblSearchMedia1 thead > tr, tbody{
display:block;
}
</style>
<table class="tblSearchMedia1">
<thead>
<tr>
<th> Region </th>
<th> Subregion </th>
<th> Country </th>
<th> Media Type </th>
<th> Media Name </th>
</tr>
</thead>
<tbody data-bind="foreach: MediaGroups">
<tr>
<td data-bind="text: ID"></td>
<td data-bind="text: ID"></td>
<td data-bind="text:ID"></td>
<td data-bind="text: ID"></td>
<td data-bind="text: ID"></td>
</tr>
</tbody>
</table>
Link to Larger image
Check if this solves your problem: http://jsfiddle.net/javitube/DLjLn/1/
.tblSearchMedia1
{
width:500px;
}
.tblSearchMedia1 tbody {
height: 50px;
overflow:auto;
display:block;
width:100%;
}
.tblSearchMedia1 thead th, .tblSearchMedia1 tbody td
{
width: 100px;
}
.tblSearchMedia1 td {
padding: 3px 10px;
}
.tblSearchMedia1 thead > tr {
position:relative;
display:block;
}
So I changed your CSS and just used generic selectors for ease of making an example.
body {
margin: 0;
padding: 0;
}
table {
border-collapse:collapse;
}
th, td {
border:1px solid black;
}
.tblSearchMedia1 thead {
position: absolute;
width: 525px;
}
.tblSearchMedia1 tbody {
width: 525px;
height: 100px;
overflow: auto;
}
.tblSearchMedia1 th {
background: #000000;
color: #ffffff;
}
.tblSearchMedia1 tbody {
position:absolute;
top: 50px;
}
.tblSearchMedia1 th, td {
width: 75px;
padding: 3px 10px;
text-align: center;
}
I assigned set widths and set the thead position to fixed.
Here is the working fiddle.
Updated fiddle to prevent header from floating when parent DOM scrolls.
http://jsfiddle.net/wuwdY/7/
I have this CSS rule for rounded corner:
th, td { padding: 8px;
background: #E8ECE0;
text-align: center;
border: 1px solid #444;
border-bottom-width: 0px;
}
thead { background-color: #446bb3 ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}
tr:first-child td, tr:first-child th {
border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
border-bottom: 1px solid #444;
border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}
My html table is:
<table >
<tbody>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
<tr >
<td >Hello</td><td >Hello</td>
</tr>
</tbody>
</table>
which gives me this
How do I fix this problem, as the td elements within the table and in the middle of the table have rounded corners too? I only need the first row and last row to have rounded corners.
Assuming your table's html resembles the following:
<table>
<thead>
<tr>
<th>First column</th>
<th>Second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row one, cell one</td>
<td>Row one, cell two</td>
</tr>
<tr>
<td>Row two, cell one</td>
<td>Row two, cell two</td>
</tr>
<tr>
<td>Row three, cell one</td>
<td>Row four, cell two</td>
</tr>
</tbody>
</table>
The the following CSS should work:
table {
border-spacing: 0;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
}
/* the first 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:first-child {
border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:last-child {
border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:first-child {
border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:last-child {
border-radius: 0 0 0.6em 0;
}
JS Fiddle demo.
Edited in response to question from OP:
the border within the table is a little think, how do i make it 1px
The borders between cells are a little thick, because the left border of one cell is against the right border of the previous cells (and the same for top/bottom borders).
One way to remove that effect is to specify border-collapse: collapse; on the table element. Unfortunately the effect of this is to also remove/unset/override the border-radius declarations: demo.
The more complicated way is to manually remove top-borders for rows with a previous row, and the left-border of a cell that follows a cell, adding the following to the previous CSS:
thead + tbody tr td,
tr + tr td {
border-top: 0;
}
tr th + th,
tr td + td {
border-left: 0;
}
JS Fiddle demo.
Edited to reduce make the CSS more durable (for single-cell rows, for the addition of a tfoot or the removal of the thead):
table {
border-spacing: 0;
}
th, td {
border: 1px solid #000;
padding: 0.5em 1em;
}
thead tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
border-top-right-radius: 0.6em;
}
thead + tbody tr:last-child td:first-child,
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 0.6em;
}
thead + tbody tr:last-child td:last-child,
tfoot tr:last-child td:last-child {
border-bottom-right-radius: 0.6em;
}
thead + tbody tr td,
tfoot + tbody tr td,
tfoot tr td,
tbody + tbody tr td,
tr + tr td {
border-top: 0;
}
tr th + th,
tr td + td {
border-left: 0;
}
JS Fiddle demo.
There is a problem with multiple tbody elements, in the absence of a tfoot element, currently in which the first tbody will retain the border-radius on their lower borders.
You can just put table into div. Styles for div (example):
div {
border-radius: 4px;
-moz-border-radius: 4px
-webkit-border-radius: 4px;
overflow: hidden; /*notice*/
}
So the table corners will be hidden.
This answer doesn't answer your question directly, but a variant.
If you dont want the middle columns to have rounded corners, this is a possible solution:
Illustration:
Properties for the table row (tr): update the table data (td) for the left most column:
tbody tr td:first-child
{
border-radius: 0.6em 0 0 0.6em;
}
Properties for the table row (tr): update the table data (td) for the second column:
tbody td:nth-child(2)
{
border-radius: 0 0.6em 0.6em 0;
}
Here is an example: JS Fiddle demo
If you have more than one column (td or th) you simply add something like this:
tbody td:nth-child(2) /* This is now the middle element out of three */
{
border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
boder-radius: 0 0.6em 0.6em 0;
}
You can reset the border radius of the td element. That should solve it.
You can give id to the td elements and using the id's of td elements set the border radius to 0px.
You should try a
clear:both;
and it will be reset.
Also you can try !important because maybe you forget other "inline css rules" in other html codes.
Though this is an old answer, I'd like to enhance it by adding my findings. In addition to David Thomas's super-smart answer, I found an edge case where it doesn't exactly fit: A single-cell row! for example:
<table>
<tr><th colspan="3">My header</th></tr>
<tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
<tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
<tr><th colspan="3">My footer</th></tr>
</table>
The rule for the top-right corner would overwrite the rule for the top-left corner (because it comes after it), and the rule for the bottom-right corner would overwrite the rule for the bottom left corner (for the same reason). See screen shot below:
The remedy for that is the css below (I added more selectors for various table-tr, tbody-tr, thead-tr combinations as needed, so you can also expand it to fit your markup):
table td,
table th{
border: 1px solid #666;
}
table{
width: 98%;
border-spacing: 0px;
}
/* alternating table row colors*/
tr:nth-child(even) { background-color:#f6f6f6; }
tr:nth-child(odd) { background-color:#ffffff; }
/* set all corner radii initially to zero */
th, td {
border-radius: 0;
}
/*set only specific radii per corner (don't use the border-radius shorthand)*/
thead tr:first-child th:first-child,
table tr:first-child td:first-child,
tbody tr:first-child th:first-child {
border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
table tr:first-child td:last-child,
tbody tr:first-child th:last-child {
border-top-right-radius: 0.6em;
}
tbody tr:last-child td:first-child,
table tr:last-child td:first-child,
tbody tr:last-child th:first-child {
border-bottom-left-radius: 0.6em;
}
tbody tr:last-child td:last-child,
table tr:last-child td:last-child,
tbody tr:last-child th:last-child {
border-bottom-right-radius: 0.6em;
}
thead + tbody tr td,
tr + tr td ,
tr + tr th {
border-top: 0;
}
tr th + th,
tr td + td {
border-left: 0;
}
/* shade th cells */
table th {
background-color: #888;
color: #FFF;
}
This results in the screenshot below, as desired:
All credit for this solution still goes to David Thomas, especially for the adjacent cells border trick!