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.
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 set a fixed width in td, but it doesn't work when the table is overflow. What I have tried is the below code.
td {
width: 192px;
}
It can resolve by following 2 steps.
1 - On table set width:100%
2 - On td of table use class like this when your data get overflow.
.dataRow
{
word-wrap: break-word;
word-break: break-all;
}
3 - after above 2, you can also set width as per your requirement, if needed.
You can change in css with td { width:20px} or you can change it inline <td style="width:20px">.
This can be achieve using display property.
Check below Snippet.
.wrapper {
width: 180px;
border: 1px solid #000;
}
.table-scroll {
width: 100%;
table-layout: fixed;
}
.table-scroll tbody {
display: block;
overflow: scroll;
}
.table-data {
border: 1px solid #0F0;
}
.table-detail {
border: 1px solid #F00;
}
td.first {
width: 200px;
display: inline-block;
}
<div class="wrapper">
<table class="table-scroll table-data">
<tbody>
<tr>
<td class="first">HEAD1</td>
<td>HEAD2</td>
<td>HEAD3</td>
<td>HEAD4</td>
</tr>
</tbody>
</table>
</div>
I have a responsive table with the first two columns fixed and the rest floating. My questions are:
Why do the headers for the first two columns float to the top of the header row, while the rest stick to the bottom?
How do I fix it so that they all stick to the bottom?
Fiddle
HTML
<div class="container">
<div class="table-responsive">
<table class="table" style="table-layout: auto; width: auto">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Floating</th>
<th>Floating</th>
<th>Floating</th>
<th>Floating</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td>999 Acacia Avenue</td>
<td>Some longish text value</td>
<td>Another longish text value</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(1) {
position: absolute;
width:30px;
left:0px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(2) {
position: absolute;
width:60px;
left:30px;
}
.table > thead:nth-child(1) > tr:nth-child(1) > th:nth-child(3) {
padding-left:30px;
}
.table > tbody > tr > td:nth-child(1) {
position: absolute;
width:30px;
left:0px;
}
.table > tbody > tr > td:nth-child(2) {
position: absolute;
width:60px;
left:30px;
}
.table> tbody > tr > td:nth-child(3) {
padding-left:30px;
}
th {
height: 100px;
}
td {
white-space: nowrap;
}
When you absolutely position a table cell it stops acting like a table and things like vertical-align: bottom tend to stop working... You can fix it by using flexbox.
Also you're being extremely specific with your selectors > and nth-child(1). That makes it more difficult to track down the issues. I removed a bunch of that and added flexbox to push things down.
Here's the fiddle
th:nth-child(1), th:nth-child(2) {
position: absolute;
width:30px;
left:0px;
display:flex;
flex-direction:column;
justify-content: flex-end;
}
th:nth-child(2) {
width:60px;
left:30px;
}
th:nth-child(3) {
padding-left:30px;
}
td:nth-child(1), td:nth-child(2) {
position: absolute;
width:30px;
left:0px;
}
td:nth-child(2) {
width:60px;
left:30px;
}
td:nth-child(3) {
padding-left:30px;
}
th {
height: 100px;
}
td {
white-space: nowrap;
}
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.
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%;