table
{
width: 100%;
}
td:first-child
{
width: 100px;
}
<table>
<thead>
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
I do not quite understand why the first td is not 100px wide and how can I do it exactly 100px with no JS?
You don't need to remove the colspan to get this to work, as other's are suggesting, although that might be a valid/better idea, if it is not needed (in your example it isn't, since there is only one row, but perhaps this is for another situation where you need it)
You can use table-layout: fixed; to get it to respect your value.
I also added padding: 0; , to get the exact with down from 102px to 100px, just for neatness sake:
table
{
width: 100%;
table-layout: fixed;
}
td {
padding: 0;
}
td:first-child
{
width: 100px;
}
<table>
<thead>
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
JSFiddle Remove colspan=2 this multiplies your width value from your css.
HTML
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
CSS
table
{
width: 100%;
}
td:first-child
{
width: 100px;
}
This should work :
table
{
width: 100%;
}
tr td:first-child
{
width: 100px;
}
<table>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
</table>
Related
As I am a beginner in designing and have not much idea about CSS manipulating so need some help.
I have one HTML page and want to implement the same functionality of freeze as we are using in Word.
Here I am having the table and want to freeze the first 4 columns so it doesn't move and stay sticky and the last column to show the total and only allow in between columns to move with scrolling bar.
NOTE: The table is dynamic and rows and columns will be dynamic. Here is my code [https://jsfiddle.net/padhiyarmahavirsinh/b51k20sr/3/][2]
The basic idea is to make two tables, give one a fixed height and add a scroll bar. You're gonna have to tweak it for your site
//not part of styling, just to get the total
const total = document.querySelector("table:last-of-type tr td:last-child");
const money = document.querySelectorAll("table:first-of-type tr td:last-child");
let sum = 0;
money.forEach(({
innerText
}) => {
sum += parseInt(innerText);
});
total.innerText = sum;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
width: 125px;
display: flex;
overflow: hidden;
}
table:first-of-type {
height: 150px;
overflow-y: scroll;
}
td,
th {
border: 1px solid grey;
text-align: center;
}
td {
height: 40px;
width: 50px;
}
<table>
<tr>
<th>name</th>
<th>money</th>
</tr>
<tr>
<td>a</td>
<td>7923</td>
</tr>
<tr>
<td>b</td>
<td>7981</td>
</tr>
<tr>
<td>c</td>
<td>3724</td>
</tr>
<tr>
<td>d</td>
<td>4234</td>
</tr>
<tr>
<td>e</td>
<td>12939</td>
</tr>
<tr>
<td>f</td>
<td>3247</td>
</tr>
<tr>
<td>g</td>
<td>5798</td>
</tr>
<tr>
<td>h</td>
<td>5324</td>
</tr>
</table>
<table>
<tr>
<td>total</td>
<td>0</td>
</tr>
</table>
I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.
rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
can anyone give me an idea of how to approach the attached grid/table layout using bootstrap4 flex/grid (must be responsive)?
It's like a table with sticky first row and sticky first column as navigation items.
I tried using w- & h- but it's not responsive without media query. Would like to know the best solution on bootstrap4.
Thanks a lot! :)
(Pardon my English...)
Freeze First Row & First Column
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event.
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});
body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
I am having issue trying to make table 1 look like table 2 using css. I also noticed the increased height and watermark image does not reflect on print preview
Table 1
Table 2
Adding a row at the end of the tbody solve this.
<table>
<thead>
<tr>
<th>S/N</th>
<th>Description of goods</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Arch</td>
<td>7.92</td>
</tr>
<tr>
<td>2</td>
<td>White</td>
<td>3.96</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000;
}
td {
border-top: 0;
border-bottom: 0;
}
table {
height: 150px;
}
tr:last-child {
height: 100%;
}
Check my example https://jsfiddle.net/moisesnandres/4py2m8aq/
The solutions I've seen for freezing a table header row is by creating another table with just the header, making the first table's header hidden. This works only if the widths are pre set. But I want my table's columns to be sized according to their contents. I also want the table to not have a fixed height, because I want to use it across devices, and want to use all available space (minus reserved one for a header)
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set.
I've added some JS to essentially clone the top rows with the most content and append them as visually hidden rows to <thead> to help get it to the right width dynamically. I've also re-tuned the CSS. Note layout still breaks if <th> content is longer than <td> content.
$(function() {
var $table = $('table');
var $body = $table.find('tbody');
var rowTexts = $body.find('tr').map(function() {
return $(this).text().trim();
}).toArray().sort(function(a, b) {
return (a.length > b.length) ? -1 : (a.length < b.length) ? 1 : 0;
});
if (rowTexts.length > 5) {
rowTexts = rowTexts.slice(0, 5);
}
var $head = $table.find('thead');
rowTexts.forEach(function(text) {
var $hiddenRow = $body.find('tr:contains(' + text + ')').clone().addClass('hidden');
$head.append($hiddenRow);
});
});
body {
height: 100%;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
text-align: left;
margin-top: 44px;
width: 100%;
}
td,
th {
border-bottom: 1px solid black;
height: 44px;
line-height: 44px;
padding: 0 1em;
}
tr.hidden td {
border: 0;
height: 0;
line-height: 0;
overflow: hidden;
}
thead {
display: table;
position: fixed;
top: 0;
width: 100%;
}
thead tr:not(.hidden) {
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Key that's longer than usual</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value that's longer than usual</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Last Key</td>
<td>Last Value</td>
</tr>
</tbody>
</table>