I want to make one width of column in table to be less, than content with. Here's my code:
html:
<table class="table">
<thead>
<tr>
<th class="col1">col1</th>
<th class="col2">col2</th>
<th class="col3">col3</th>
<th class="col4">col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">aaaaaa</td>
<td class="col2">aaaaaa</td>
<td class="col3">aaaaaa</td>
<td class="col4">aaaaaa</td>
</tr>
</tbody>
</table>
scss:
.table {
margin: 0;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
}
td, th {
border: 1px solid black;
padding: 5px 8px;
}
td:first-child, th:first-child {
width: 10px;
overflow: hidden;
white-space: nowrap;
}
As I understand setting table-layout: fixed should helped, but nothing is really changed. The first column's with still is not 10px.
How can I set width to a column then?
You may give it a try with max-width instead.
disclaimer: unsure if all browsers will take it
.table {
margin: 0;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
}
td, th {
border: 1px solid black;
padding: 5px 8px;
}
td:first-child, th:first-child {
max-width: 10px;
overflow: hidden;
white-space: nowrap;
}
<table class="table">
<thead>
<tr>
<th class="col1">col1</th>
<th class="col2">col2</th>
<th class="col3">col3</th>
<th class="col4">col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">aaaaaa</td>
<td class="col2">aaaaaa</td>
<td class="col3">aaaaaa</td>
<td class="col4">aaaaaa</td>
</tr>
</tbody>
</table>
Also when I added width: 100% to the table, code started to work
Related
I have a <td> element with a little bit of padding, and I'd like to shade in the entire table cell when it's immediate child is a <mark> element.
I'm using markdown to generate the table itself, so simply adding a class like <td class="highlight"> isn't really an option.
Basic Table Setup
Here's a basic table setup
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranger</td>
<td>Dog</td>
</tr>
<tr>
<td><mark>Frida <br/> Kahtlo</mark></td>
<td><mark>Cat</mark></td>
</tr>
</tbody>
</table>
With some basic CSS
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
position: relative;
}
Attempt #1
One idea was to absolutely position the <mark> element and pin it to all four sides:
td > mark {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 8px;
}
However, it doesn't seem possible to set the parent parent height from an absolutely positioned child, so the contents overflows the <td>
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
position: relative;
}
td > mark {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding: 8px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranger</td>
<td>Dog</td>
</tr>
<tr>
<td><mark>Frida <br/> Kahtlo</mark></td>
<td><mark>Cat</mark></td>
</tr>
</tbody>
</table>
Attempt #2
Another idea was to reverse the padding with a negative margin like this:
td > mark {
display: block;
margin: -8px;
padding: 8px;
}
However, if there is a line wrap in another cell, I can't get the child element to occupy the full height available
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
position: relative;
}
td > mark {
display: block;
margin: -8px;
padding: 8px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranger</td>
<td>Dog</td>
</tr>
<tr>
<td><mark>Frida <br/> Kahtlo</mark></td>
<td><mark>Cat</mark></td>
</tr>
</tbody>
</table>
Q: Any other ways that this might be possible?
Use a big box-shadow and hide the overflow
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid #ddd;
padding: 8px;
}
td {
overflow:hidden;
}
td > mark {
display:inline-block;
box-shadow: 0 0 0 50px yellow;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ranger</td>
<td>Dog</td>
</tr>
<tr>
<td><mark>Frida <br/> Kahtlo</mark></td>
<td><mark>Cat</mark></td>
</tr>
</tbody>
</table>
I suggest to loop all marks and add bg color yellow to their parent :
document.querySelectorAll('mark').forEach(function(item){
item.parentElement.style.backgroundColor ="ff0";
});
codepen:
https://codepen.io/HBA/pen/BaayQOL
I am learning css writing styles for an html table and I was wondering how I can remove the borders of the blank cell for the first row of my header, in addition to rounding the edges for the cells estimated amount and total.
I leave the html and css in addition to a thread of reproduction:
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
.blank {
background-color: #FFFFFF;
}
table tr {
background-color: #f8f8f8;
border: 2px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
<table>
<thead>
<tr>
<th class="blank"></th>
<th colspan="2">estimated amount</th>
<th>total</th>
</tr>
<tr>
<th scope="col">Account</th>
<th scope="col">Expense</th>
<th scope="col">Income</th>
<th scope="col">Diff</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$3,190</td>
<td data-label="Income">$1,000</td>
<td data-label="Diff">$2,190</td>
</tr>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$5,000</td>
<td data-label="Income">$1,000</td>
<td data-label="Diff">$4,000</td>
</tr>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$7,000</td>
<td data-label="Income">$4,000</td>
<td data-label="Diff">$3,000</td>
</tr>
</tbody>
</table>
this is a tricky one because applying border-radius while having the value of border-collapse set to collapse will not work the way you wanted it to.
My solution for you is to create your borders using CSS like this :
table {
border-collapse: separate;
border-spacing: 0;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
th ,td {
border-right:2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #f8f8f8;
padding: .35em;
}
#tr1 th:last-child {
border-top: 2px solid #ddd;
}
#tr1 th:nth-child(2) {
border-left: 2px solid #ddd;
border-top: 2px solid #ddd;
}
#tr2 th:first-child{
border-top: 2px solid #ddd;
}
#tr2 th:first-child{
border-left: 2px solid #ddd;
}
tr td:first-child{
border-left: 2px solid #ddd;
}
.blank {
background-color: #FFFFFF;
border: none;
}
.estimatedAmountClass {
border-top-left-radius: 40px;
}
.totalClass {
border-top-right-radius: 40px;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
<table >
<thead>
<tr id="tr1">
<th class="blank"></th>
<th class="estimatedAmountClass" colspan="2">estimated amount</th>
<th class="totalClass">total</th>
</tr>
<tr id="tr2">
<th scope="col">Account</th>
<th scope="col">Expense</th>
<th scope="col">Income</th>
<th scope="col">Diff</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$3,190</td>
<td data-label="Income">$1,000</td>
<td data-label="Diff">$2,190</td>
</tr>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$5,000</td>
<td data-label="Income">$1,000</td>
<td data-label="Diff">$4,000</td>
</tr>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Expense">$7,000</td>
<td data-label="Income">$4,000</td>
<td data-label="Diff">$3,000</td>
</tr>
</tbody>
</table>
I've assigned '25px' to 'tr' in this photo, but 29 on the actual page.
I found out that 'border' goes right and left in css, and 2px is added.
I am wondering why 2px is applied when it becomes '27px' even if it does so.
The code below shows the code shown in the picture.
.div_result {
overflow-y: hidden;
width: 766px;
height: 250px;
overflow-x: auto;
border: 1px solid #dbdbdb;
}
table.scroll {
width: 150%;
border-spacing: 0;
}
table.scroll tbody,
table.scroll thead {
display: block;
}
thead tr th {
height: 30px;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td,
thead th {
border: 1px solid black;
}
tbody td:last-child,
thead th:last-child {}
thead tr {
display: inline-table;
width: 100%;
}
th {
background-color: red;
}
<div class="div_result " style="position:relative;">
<table id="" class="scroll">
<thead class="sorted_head">
<tr>
<th id="" class="result_title " width="25">
<span class="some-handle">a</span>
</th>
<th id="" class="result_title " width="120">
<span class="some-handle">a</span>
</th>
<th id="" class="result_title " width="250">
<span class="some-handle">a</span>
</th>
<th class="result_title ">
<span class="some-handle">a</span>
</th>
</tr>
</thead>
<tbody class="sort_body">
<tr>
<td style="padding: 0;width: 25px;">asd</td>
<td style="width: 120px;">asd</td>
<td style="width: 250px;">asd</td>
<td style="width: 738px;">asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
</tbody>
</table>
</div>
CSS table will auto-space it's columns based on first row. Also you need table {table-layout: fixed} for it to work:
$(document).ready(function () {
console.log($('table td:first').outerWidth());
})
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
td {
box-sizing: border-box;
height: 25px;
border: 1px solid white;
background-color: blue;
}
td:first-child {
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
I am trying to implement a table with fixed headers using the concepts from this page:
http://www.imaputz.com/cssStuff/bigFourVersion.html#
When I implemented the CSS from that page, my table columns are not aligned with the table headers.
HTML:
<div id="tableContainer" class="tableContainer">
<table class="sortable" border=1 frame=void cellspacing=0 cellpadding=4>
<thead class="fixedHeader">
<tr>
<th id="Column1" align=center valign=bottom>Column 1</th>
<th id="Column2" align=center valign=bottom>Column 2</th>
<th id="Column " align=center valign=bottom>Column 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td align=right>ABCD</td>
<td aligh=right>XY</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>CD</td>
<td aligh=right>FOO</td>
<td aligh=right>12345678</td>
</tr>
<tr>
<td align=right>BAR</td>
<td aligh=right>BAZ</td>
<td aligh=right>12345678</td>
</tr>
</tbody>
</table>
CSS:
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 150px;
overflow: auto;
width: 300px
}
html>body div.tableContainer {
overflow: hidden;
}
div.tableContainer table {
float: left;
}
Here is that on jsfiddle:
http://jsfiddle.net/softvar/yL84C/
I was able to 'fix' this by explicitly setting the cell size:
CSS:
* {
box-sizing: border-box;
}
th, td {
width: 100px;
}
html>body tbody.scrollContent {
display: block;
height: 100px;
overflow: auto;
}
thead.fixedHeader tr {
position: relative
}
html>body thead.fixedHeader tr {
display: block
}
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 150px;
overflow: auto;
width: 300px
}
html>body div.tableContainer {
overflow: hidden;
}
div.tableContainer table {
}
Here is that one jsfiddle:
http://jsfiddle.net/cFr38/
But what I really want is the cells to be automagically sized based on the data (which is what my table does now without the new CSS)? How can I do that?
I have a table that can slide left or right when the screen is narrow enough. The first column is positioned absolute so that it is always visible.
Is it possible to make the cells in the first column maintain the size of the cells in the other columns? I am not sure how to achieve this while keeping the first column frozen.
Here is a fiddle to my code: http://jsfiddle.net/ta945/
Here's the HTML and CSS
HTML:
<div>
<table>
<thead>
<tr>
<th class="sticky">Name</th>
<th>Helpful Services</th>
<th>State</th>
<th>City</th>
<th>Phone</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">First Name</td>
<td>Math</td>
<td>CO</td>
<td>San Francisco</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Second Name</td>
<td>Reading</td>
<td>NY</td>
<td>New York City</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Third Name</td>
<td>Art</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Four Name</td>
<td>Programming</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
width: 100%;
border: 1px solid #000000;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: seperate;
border-spacing: 0;
margin-left: 5em;
}
thead, tbody, tr {
vertical-align: middle;
}
th {
font-weight: bold;
padding: 2px 4px;
background-color: #676767;
color: #FFFFFF
}
td {
padding: 2px 4px;
}
tbody tr:nth-child(even) td {
background-color: #cccccc;
}
.sticky {
position: absolute;
left: 0;
top: auto;
margin-left: 9px;
}