table.perimeter td,
table.perimeter th
{
border: 1px solid blue;
border-collapse: collapse;
}
I've tried a few things nothing works.
the borders around each cell stay separated. help!
You have to apply border-collapse to the table (MDN).
table.perimeter {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
<table class="perimeter">
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
Since we don't have your structure, I can't tell if table.perimeter is a sufficient selector to apply it to a specific table, you may have to add an id
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
Or add a class to table like "table1"
.table1 {
border: 1px solid blue;
border-collapse: collapse;
}
Related
There is a wide table with table-layout: fixed. I'm trying to figure out how the width: min-content property should work for a cell of this table.
table {
table-layout: fixed;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.min {
width: min-content;
}
<table>
<thead>
<tr>
<th class="min">Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</tbody>
</table>
I get the desired result in Firefox, but not in Chrome. Is this a Chrome bug or am I doing something wrong?
If it's a Chrome bug, what's the workaround for getting the minimum width of the first column, given that I want to use table-layout: fixed and don't want to look for a fixed cell width like width: 30px?
Using only HTML and CSS,
I wish to have a table like the following:
Header1 Header2
-------------- --------------------
L1Col1 content L1Col2 wider content
L2Col1 datum L2Col2 datum2
Where the underline automatically sizes to the
table column width.
Help!
Try this:
CSS:
.sample-table {
width: 50%;
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 1px dashed #000;
}
.sample-table td,
.sample-table th {
padding: 3px;
}
HTML:
<table class="sample-table">
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>L1Col1 content</td>
<td>L1Col2 wider content</td>
</tr>
<tr>
<td>L2Col1 datum</td>
<td>L2Col2 datum2</td>
</tr>
</table>
Azu,
Thanks for your answer.
The "border-spacing" usage was completely enlightening to me.
I modified the CSS to the following:
.sample-table {
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 2px solid #000;
}
.sample-table td,
.sample-table th {
padding: 3px 0px;
}
This gives me exactly what I wanted.
I have the following table which is being created inside my asp.net web application:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #eeeeea;
cursor: pointer;
}
<table class='table' style='border-collapse:separate; border-spacing:1em;'>
<thead>
<tr>
<th style='text-align:left'></th>
<th style='text-align:right'>Pages</th>
</tr>
</thead>
<tbody>
<tr>
<td>objectives</td>
<td>3<td>
</tr>
</tbody>
</table>
Now when I hover over a table row, I get the following effect:
Where there will be a white area between the table <td> as shown above.. So can anyone advice on this please? How can I define a continuous hover over my entire table row?
I've tried setting the following to change the border color on hover, but this has no effect:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #eeeeea;
border-color: #eeeeea;
cursor: pointer;
}
The gap is from border-collapse:separate; border-spacing:1em; on the table, change that to border-collapse:collapse;, and use padding on th and td for spacing as needed.
Side note, you forgot to close the second <td> in the markup.
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: pink;
cursor: pointer;
}
.table th,
.table td {
padding: 1em;
}
<table class='table' style='border-collapse:collapse;'>
<thead>
<tr>
<th style='text-align:left'></th>
<th style='text-align:right'>Pages</th>
</tr>
</thead>
<tbody>
<tr>
<td>objectives</td>
<td>3</td>
</tr>
</tbody>
</table>
Try to colour the row its self, and make the cells transparent.
.table tbody tr:hover {
background-color: #eeeeea;
cursor: pointer;
}
.table tbody tr td, .table tbody tr th {
background-color: transparent;
}
I have a table with a fixed height and a variable number of tbody elements.
table {
border:1px solid black;
height:300px;
}
By default the page increases the height of the first tbody to fill the total height of the table (demo: http://jsfiddle.net/hvdcz8qr/). How can I have all the tbody elements stacked at the top of the table, and keep the extra height below the tbody elements?
Using elements other than table and tbody is not an option in my case.
[Update] I have added a second column to my example: http://jsfiddle.net/hvdcz8qr/10/
You can set the display of the tbody to block
table tbody {
display: block
}
Edit
Inorder to make the td use all the space:
table tbody tr {
display: flex;
}
td {
border:1px solid red;
display: block;
width: 100%;
}
New JSFiddle
After your comment in my suggestion try this:
table {
border: 1px solid black;
height: 300px;
}
td {
border: 1px solid red;
}
tbody {
float: left;
clear: left;
width: 100%;
display: inherit;
}
<table>
<tbody>
<tr>
<td>First tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>second tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>third tbody
</td>
</tr>
</tbody>
</table>
set width: 100% and display: inherit to take the whole table width.
How to have tr border-bottom but not td (td without any border)?
I tried the following but td border 0 overrides the tr border too and just thead and th get border!
table.admin_datagrid tbody tr {
border:1px solid red;
}
table.admin_datagrid td{
border: 0;
}
Did u mean border just between the rows and not between cols?
table.admin_datagrid tbody tr {
}
table.admin_datagrid td{
border-left: 0;
border-right: 0;
border-top:1px solid red;
border-bottom:1px solid red;
}
Your issue is not that the td border overrides the tr border, the issue is that you're trying to set border on tr. Instead, try assigning a class on td elements in the row that need to have the bottom border:
HTML:
<table class="admin_datagrid">
<tbody>
<tr>
<td class="border-bottom">
Text1
</td>
</tr>
<tr>
<td>
Text2
</td>
</tr>
</tbody>
</table>
CSS:
table.admin_datagrid td.border-bottom {
border-bottom: 1px solid red !important;
}
table.admin_datagrid td{
border: 0;
}
JSFiddle: http://jsfiddle.net/J7b3M/
Change order and add display:block :
table.admin_datagrid td{
border: 0;
}
table.admin_datagrid tr {
display: block;
border:1px solid red;
}
Fiddle:
http://jsfiddle.net/z5GZN/
Add border-collapse:collapse to your table:
DEMO
table{
border-collapse: collapse;
}
table.admin_datagrid tbody tr {
border: 1px solid red;
}
table.admin_datagrid td{
border: 0;
}