I'm using the following CSS to hold my table column headers to the top of the page:
table thead tr {
display: block;
}
table tbody {
display: block;
height: 75px;
overflow: auto;
}
The thing I can figure out is why the table is only showing 2 rows (depending on the content height of the rows).
If I adjust the height under table tbody then the header drops down even further, leaving a white space between the top of the page and the start of the header (which I, obviously, don't want).
Hopefully, this is a simple one as I am pulling out my hair... and there's not much left.
EDIT
Here's the relevant markup (I had to make it generic). There are 30 columns and ~1200 rows.
<!doctype html>
<html>
<head>
<style type="text/css">
table thead tr {
display: block;
}
table tbody {
display: block;
height: 75px;
overflow: auto;
}
</style>
</head>
<body>
<table width="190%" border="1" cellpadding="6" style="border-collapse: collapse">
<thead>
<th>COLUMN 1</th>
<th>COLUMN 2</th>
<th>COLUMN 3</th>
<th>COLUMN 4</th>
<th>COLUMN 5</th>
<th>COLUMN 6</th>
<th>COLUMN 7</th>
<th>COLUMN 8</th>
<th>COLUMN 9</th>
<th>COLUMN 10</th>
<th>COLUMN 11</th>
<th>COLUMN 12</th>
<th>COLUMN 13</th>
<th>COLUMN 14</th>
<th>COLUMN 15</th>
<th>COLUMN 16</th>
<th>COLUMN 17</th>
<th>COLUMN 18</th>
<th>COLUMN 19</th>
<th>COLUMN 20</th>
<th>COLUMN 21</th>
<th>COLUMN 22</th>
<th>COLUMN 23</th>
<th>COLUMN 24</th>
<th>COLUMN 25</th>
<th>COLUMN 26</th>
<th>COLUMN 27</th>
<th>COLUMN 28</th>
<th>COLUMN 29</th>
<th>COLUMN 30</th>
</thead>
<tbody>
<tr>
<td>ROW 01</td>
<td>ROW 01</td>
<td>ROW 01</td>
</tr>
<tr>
<td>ROW 02</td>
<td>ROW 02</td>
<td>ROW 02</td>
</tr>
<tr>
<td>ROW 03</td>
<td>ROW 03</td>
<td>ROW 03</td>
</tr>
<tr>
<td>ROW 04</td>
<td>ROW 04</td>
<td>ROW 04</td>
</tr>
<tr>
<td>ROW 05</td>
<td>ROW 05</td>
<td>ROW 05</td>
</tr>
<tr>
<td>ROW 06</td>
<td>ROW 06</td>
<td>ROW 06</td>
</tr>
<tr>
<td>ROW 07</td>
<td>ROW 07</td>
<td>ROW 07</td>
</tr>
<tr>
<td>ROW 08</td>
<td>ROW 08</td>
<td>ROW 08</td>
</tr>
<tr>
<td>ROW 09</td>
<td>ROW 09</td>
<td>ROW 09</td>
</tr>
<tr>
<td>ROW 10</td>
<td>ROW 10</td>
<td>ROW 10</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm also attaching an image of what I'm getting. The bottom line (highlighted by the arrow) needs to be expanded out to cover a larger area of the page.
It really doesn't have to be too complicated. Remove the display: block from your table elements. It's not necessary. The user agent already applies its own styles to these to make them behave like tables.
table thead tr {
}
table tbody {
height: 75px;
overflow: auto;
}
Here's what worked (for me):
table thead tr {
display: block;
}
table tbody {
display: block;
overflow: auto;
height: 700px;
}
Notice that the height item is listed last in the table tbody element. Not sure why I thought about doing that but the height responded the way I wanted once I changed the order.
Related
enter image description here
Hello, how can i get this effect, where the th's and td's are seemingly in one row? Here is the HTML
#media (max-width:360px){
thead {
float: left
}
th{
display: block;
}
tbody {
float: right
}
td{
margin: 0px;
display: block;
}
}
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>Jon</td>
<td>Doe</td>
<td>Chief Executive Eater</td>
</tr>
</tbody>
</table>
this is my current try but it is nowhere near the result i need
What you want can only be done repeating the tr and the th which will make the code more and longer. here is your example.
if you dont want border all around, you can use: border-bottom, border-top.
tr {
display: inline-flex;
flex-direction: column;
}
td , th{
padding: 5px;
border: 1px solid black;
}
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
you should checkout out how its done using Smarty and Twig Templates.
smarty:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
{foreach from=$data item=row}
<tr>
<td>{$row.col1}</td>
<td>{$row.col2}</td>
</tr>
{/foreach}
</tbody>
</table>
Twig: using for or foreach.
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row.col1 }}</td>
<td>{{ row.col2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Why in the following example do the columns of the header of the table not take the widths defined in the CSS?
I think in Table 1, the browser can not calculate a percentage value and a fixed one.
/************* commun css***********************/
table {
border-collapse: collapse;
table-layout:fixed;
width: 100%;
position: relative;
}
td, th {
border: 1px solid black;
-webkit-box-sizing: border-box;
}
tr{
width: 100%;
position: relative;
}
/************* css table 1***********************/
.table1 .col1 {
width: calc(35% - 10px);
}
.table1 .col2 {
width: calc(40% - 10px);
}
.table1 .col3 {
width: calc(25% - 10px);
}
.table1 .col4 {
width: 30px;
}
/************* css table 2***********************/
.table2 .col1 {
width: calc(30%);
}
.table2 .col2 {
width: calc(20%);
}
.table2 .col3 {
width: calc(50%);
}
<p>
Table 1 : invalid render (Chrome browser)
</p>
<table class="table1">
<thead>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th class="col3">Col 3</th>
<th class="col4">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>
<p>
Table 2 : valid render (Chrome browser)
</p>
<table class="table2">
<thead>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th class="col3">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</tbody>
</table>
Does anyone have any advice in this situation?
Thank you in advance
Example : https://jsfiddle.net/3wq65hb4/
Yes, there is a problem with calc() width for tables. But it works for divs. What about making it on divs instead of tables?
Let's look at example for your purposes:
https://jsfiddle.net/3wq65hb4/39/
You can find there:
.row {
display: flex;
}
It's for equal height for columns. Also you can find there:
margin-left: -1px;
It's solution for borders - to avoid double borders like:
Also remember that max-width for your column: 30px means that it always will be 30px even if your content will be wider:
But maybe it's what you want to achieve.
Let me know if that solution is ok for you. And good luck with other htmls :)
I have the following table below and I would like to add style to overflow-x in container.
I've tried, but doesn't work for me (Chrome):
.container::-webkit-scrollbar:horizontal {
width: 10px;
}
.container::-webkit-scrollbar-thumb:horizontal {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
AND
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-thumb {
height: 20px;
background: hsla(0, 0%, 53.3%, .4);
}
Fiddle
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
run this and does it work for you?
<div class="container">
<table>
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
<td>Row 1 Cell 4</td>
<td>Row 1 Cell 5</td>
<td>Row 1 Cell 6</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
<td>Row 2 Cell 4</td>
<td>Row 2 Cell 5</td>
<td>Row 2 Cell 6</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
<td>Row 3 Cell 3</td>
<td>Row 3 Cell 4</td>
<td>Row 3 Cell 5</td>
<td>Row 3 Cell 6</td>
</tr>
</tbody>
</table>
</div>
<style>
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: .5em 1em;
}
</style>
I have a page with several tables on it. To improve readability the body of each table is collapsed, so the user just sees the header and the footer. There is a button to toggle it to expand.
In IE and Firefox, it works great. But in Chrome and Safari, there is white space in the place of the collapsed row. Is there a workaround for those two browsers that will remove the white space?
Here is example code:
.collapse {
visibility: collapse;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<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>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
Chrome and Safari treat visibility: collapse as visibility: hidden.
This will only work in Firefox/IE.
You can change it to display: none to make sure it works the same in all browsers, however this way you will miss the general idea of the collapse value, where all the width/height of the table's elements are calculated and take into account while affecting other elements in the table:
.collapse {
display: none;
}
<table>
<caption>This is a Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody class='collapse'>
<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>
</tbody>
<tfoot>
<tr>
<td>TOTAL 1</td>
<td>TOTAL 2</td>
</tr>
</tfoot>
</table>
I would like to know how to create a rounded corners on a table head only?
Additional detail... I want to have a rouded head of the table the rest of the table is a rectangle just the first header row should have rounded corners.
The problem is, that you need to make the certain inner elements round.
So you have to make for the first th and the last th round to get the wished solution.
table th:first-child{
border-radius:10px 0 0 10px;
}
table th:last-child{
border-radius:0 10px 10px 0;
}
It would be easier to help you if we saw your code or at least the code that didn't work for you.
Anyway, this tutorial seems relevant to your question http://www.jeox.com/docs/manual/web/round_table_corners.html
EDIT: Or this one http://blog.jezmckean.com/css3-rounded-table-corners-no-images/
There are a number of options. It depends on what you really want to achieve visually.
But be sure that border-collapse is NOT set to collapse, because that will not work. For more information, see this mozilla link: https://developer.mozilla.org/en/CSS/border-radius
#uno,
#due th,
#tre th {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border: 1px solid black;
}
#tre td {
border: 1px solid black;
}
<table id="uno" border="0">
<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>
<br>
<table id="due" border="1">
<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>
<br>
<table id="tre" border="0">
<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>