This question already has answers here:
display table height not always respected
(3 answers)
Closed 5 years ago.
I created an html table and I am trying to set a max-height and height properties to itbut the table don't accept themI am using this code
HTML
<table class="table table-striped table-hover" id="Table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 0 0</td>
<td>Row 0 1</td>
<td>Row 0 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 0 3</a></td>
</tr>
<tr>
<td>Row 1 0</td>
<td>Row 1 1</td>
<td>Row 1 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 1 3</a></td>
</tr>
<tr>
<td>Row 2 0</td>
<td>Row 2 1</td>
<td>Row 2 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 2 3</a></td>
</tr>
</tbody>
</table>
CSS
#Table {
width: 600px;
max-width: 600px;
height: 210px;
max-height: 210px;
overflow-y: auto;
}
td {
width: 150px;
max-width: 150px;
}
the table:
The specified height and max-heightmustn't allow the table to carry more than these three rows and the headerbut when I add another row the table
totally ignores the height and the max-heightand expands to fit the four rows
I want the table to show a scrollbar as a result of the overflow-y: auto propertybut the didn't happen
I am using This Bootstrap style
please help
Setting table height is overruled by the table content. See this answer: display table height not always respected
You could work around it by wrapping a div around it (and setting the height and overflow on the div).
Put the table in a div, and set the height and width for that div:
<div id="Table">
<table class="table table-striped table-hover">
<!-- Table rows and data -->
</table>
</div>
Note: remove the id from the table tag.
Just wrap a div around the table, checkout this Codepen for a demo
You should target the class, not the ID.
Like this:
.table {
width: 600px;
max-width: 600px;
height: 210px;
max-height: 210px;
overflow-y: auto;
}
Related
I believe the width: 1px; white-space: nowrap; trick worked before but it seems not anymore now? Ref. CSS table column autowidth (there the table was also in fixed layout but thats back in 2011)
Here is the HTML and CSS:
table {
table-layout: fixed;
width: 100%;
}
td,
th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: 1px;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2 even width</th>
<th>Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
I also have an example setup in the following jsfiddle:
http://jsfiddle.net/hCkch/21/
How do you make the last column auto width based on the content while the other columns respect table-layout: fixed?
Note: the three columns given above is just an example. So please no hardcoded answers to make each column width 100/3%. This is a general question and the answer should fit for n columns with even width but the last one auto width based on the content.
With table-layout, you will want to set the widths of the cells in the first row of the table (https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). You'll also want to add a width of 100% for the final column that is meant to auto-expand. Here is an edit of your jsfiddle:
http://jsfiddle.net/jessbodie/hCkch/31/
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th class="col1st">Column 1 even width</th>
<th class="col2nd">Column 2 even width</th>
<th class="col3rd">Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
table {
table-layout: fixed;
width: 100%;
}
td, th {
border: 1px solid red;
padding: 15px;
}
.col1st {
width: 100px;
}
.col2nd {
width: 100px;
}
.col3rd {
width: 100px;
}
.auto {
width: 100%;
white-space: nowrap;
}
For making the first n columns the same width, in SASS you can use the calc function to come up with the widths.
As mentioned in the comments, the only way I know to do this that should work cross browser is to get rid of table-layout: fixed; and set the width of the remaining columns. Fixed layouts are good for lots of things but automatically calculating based on content doesn't seem to be one of them.
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
width: 33.33%
}
.auto {
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
I realize you clarified that you don't want markup specific rules, but it does in fact accomplish your goal with the one requirement that you know how many columns you will be dealing with beforehand. In general, this should not be prohibitive.
Another possibly work around is to assign the widths client side using js after the fact:
$(document).ready(function() {
var width = 100 / $('table tr:first th:not(.auto)').length;
var cols = $('table th:not(.auto)');
cols.css('width', width + '%');
});
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
And finally, I'll mention there is a Firefox specific implementation of min-content that actually does exactly what you want. Unfortunately, it only works on Firefox:
table {
width: 100%;
table-layout: fixed;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: -moz-min-content;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
Hi I have to create a table like below image.
Please help me to get that table. I am working on angular 4 project
You can merge cells width colspan (horizontally) and rowspan (vertically) attributes in HTML.
So you can create 2 rows for the header. In those columns where there are no subheaders, use rowspan=2 to merge vertically. Where there are two rows in the header, use colspan=X in the first row to merge horizontally above the subheaders:
table {
border-collapse: collapse;
width: 100%;
}
th {
background: grey;
border: 1px solid white;
padding: 0;
text-align: center;
}
<table>
<tr>
<th rowspan="2">Simple header</th>
<th colspan="2">Combo header</th>
</tr>
<tr>
<!-- skip 1st column because it merges vertically -->
<th>Sub 1</th>
<th>Sub 2</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>
I have 2 tables using DataTable :
top: exact match
bottom : related
Here is what they look like right now.
As you can see that, there is no need to show the table header on the second table. I want to hide it.
I have tried using this on my CSS :
Since the class = inventory_related
.inventory_related table thead {
display:none;
}
I also tried to take off the whole :
<thead class="thin-border-bottom ">
<th>Catalog # </th>
<th>Description</th>
<th>Available Vials</th>
</thead>
This doesn't work either.
Anyone have any suggestion on how do I hide my 2nd table header ?
Thanks.
In my case, setting
.inventory_related thead {
display:none;
}
messed with column widths, while
.inventory_related thead {
visibility: collapse;
}
seems to be working.
<table>
<thead style='display:none;'>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
Please see the following code as an example:
.inventory_related thead {
display: none;
}
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
<table class='inventory_related'>
<thead>
<th>header</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 3</td>
<td>row value 4</td>
</tbody>
</table>
if the class of <table> is inventory_related then write the following css
.inventory_related thead {
display:none;
}
If you want to do it in jQuery(js) then you can simply do:
$("#datatableId").css("display", "none");
where 'datatableId' is the ID of your table or some div tag which contains the table.
I am using float in css to display multiple tables vertically next to one another however float puts them without any spacing in between. How can I insert some gaps betwen these tables?
table{
float: left;
border:none;
border-collapse: collapse;
}
you shall use the margin property
table
{
margin:0 10px;
}
For info, the 0 corresponds to the above and under margin, and the 10 for the left and right margin.
You could also write it like margin(0 10px 0 10px); which stands for up - right - bottom - left
here you can use the {display:inline} instead of float
or you can use the padding or margin between tables/elements
table{
display: inline;
border:none;
border-collapse: collapse;
margin:0px 0px 0px 10px
}
I guess you're looking for this: JSFiddle
HTML
<table border="1" class="table1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1" class="table2">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS
.table1 {
float: left;
margin-right: 15px;
background: red;
}
.table2 {
float: left;
background: blue;
}
NOTE: I made table1 with margin-right - this will separate from table2. If you have more them 2 tables, add margin-right in left tables, or margin-left in right tables.
Is it possible at all?
I have table that fills its container. (width 100%)
Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
#media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
You could use CSS and a media query to hide the middle column when the screen reduced to a specified width.
For example:
#media all and (max-width:500px) {
.second {
display: none;
}
}
In this example, the second column would not be displayed when the screen was reduced to a width of less than 500px