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.
Related
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 want to make a table with no header, 2 column, the first cell of the first row spans 65% width of the table and from the second row, the first cell spans 20% width of the table.
Here are the CSS selector of 2 kinds of first column:
#myTable > tbody > tr:nth-child(1) > td:nth-child(1)
#myTable > tbody > tr:not(:first-child) > td:nth-child(1)
How can I make it?
Edit: Here is my solution and it didn't work
table, td {
border: 1px solid black;
}
#myTable {
border-collapse: collapse;
width: 80%;
table-layout: fixed;
}
#myTable > tbody > tr:nth-child(1) > td:nth-child(1) {
width: 70%;
height: 100;
}
#myTable > tbody > tr:not(:first-child) > td:nth-child(1) {
width: 20%;
}
I would take advantage of grids, very straightforward:
.myTable {
display: grid;
grid-template-rows: 1fr 1fr;
}
.myTable first-row {
grid-template-columns: 65px 35px;
}
.myTable second-row {
grid-template-columns: 20px 80px;
}
I would recommend to use classes for cells you want to style. Because any changes and your style will be broken.
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
tr {
display: flex;
}
.flexCell {
flex-grow: 1;
}
.firstCell {
width: 65%;
}
.secondCell {
width: 20%;
}
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tbody>
<tr>
<td class="firstCell">
Column one
</td>
<td class="flexCell">
Column two
</td>
</tr>
<tr>
<td class="secondCell">
Column one (second row)
</td>
<td class="flexCell">
Column two (second row)
</td>
</tr>
</tbody>
</table>
</body>
</html>
I used flex-grow to make other two cell fill the rest of the table.
My table cell has fixed width and contains select list and one or two buttons in a row. Select should fill all the space before buttons. I solved this with div wrapper, but my boss doesn't allow me to use any additional divs because from his point of view each element must symbolize some program data. He alsow doesn't allow me to use flexboxes.
Here's the code of how it should look like
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
#wrap {
overflow:hidden;
}
<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
<option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>
Is there a way I can do this without additional elements or non-cross-browser solutions like flexboxes?
Try this option with help of inner table and without any additional wrappers. https://jsfiddle.net/xkLaq47m/
/---CSS---/
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
.inner-table{
margin: 0;
}
.inner-table__button-cell{
min-width: 15px;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
/*---HTML---*/
<table>
<tbody>
<tr>
<td>
<table class="inner-table">
<tbody><tr>
<td>
<select>
<option value="">ttttttttt</option>
</select>
</td>
<td class="inner-table__button-cell">
<button>+</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I need to accomplish that my whole TD is a hyperlink.
Other solutions I found on the internet won't seem to work. Like the one shown beneath.
Therefore I want to know if you guys could help me out.
I think the problem might be the fact that this is about a scalable table.
If so, is there another way to accomplish my goal?
<div class="block">
<table>
<tr>
<td>
<a href="http://example.com">
<div style="width: 100%; height: 100%;">
Test
</div>
</a>
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
<tr>
<td>
Google
</td>
</tr>
</table>
</div>
With this CSS:
<style type="text/css">
.block {
width: 100px;
height: 500px;
background: #008700;
}
.block table {
/*width: 100%;*/
height: 100%;
text-align: center;
border-collapse: collapse;
}
.block table tr:nth-child(odd) {
background: #008200;
}
.block table tr:nth-child(even) {
background: #205527;
}
.block table tr {
}
.block table tr td {
float: left;
}
.block table tr td a {
display: block;
width: 100%;
}
</style>
Add "height:100%" to :
.block table tr td a {
display: block;
width: 100%;
height:100%;
}
Demo Fiddle
Firstly remove float: left; from .block table tr td
Then add height:100%; to .block table tr td a
you need add in block table tr td a height: 100%;
I am trying to set the width of a TD to 50% in Firefox.
IE works fine.
table.tablelist
{
width: 100%;
border-collapse: collapse;
display: block;
}
.tablelist tr
{
border-bottom: 1px solid black;
}
.tablelist td
{
width: 50%;
}
<table class="tablelist">
<tbody>
<tr>
<td>
African
</td>
<td>
Jungle
</td>
</tr>
</tbody>
</table>
Firefox seems to ignore the width of the TD when set to a percentage value.
if I set the width to 200px then it will work fine.
What am I missing?
Remove display: block; from table.tablelist
Try "min-width" instead of "width".