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>
Related
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.
So this is targeted toward IE 10 and 11 and I'm also using Bootstrap 3.
If I have a desktop monitor, I'd like my table to have this layout:
<table class="table table-responsive">
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
On a phone (or similar device), I'd like to have the layout like this:
<table class="table table-responsive">
<thead>
<tr>
<td>Header</td>
<td>Data</td>
</tr>
</thead>
<tfoot></tfoot>
<tbody>
<tr>
<td>Header 1</td>
<td>Data 1</td>
</tr>
<tr>
<td>Header 2</td>
<td>Data 2</td>
</tr>
<tr>
<td>Header 3</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
Is there some or CSS that will allow me to do this? Or can this only be done with javascript (and css)?
To be clear, I want the code to detect the resolution and display one of the two layouts.
You can create two tables and use css media queries to toggle between the two, see fiddle https://jsfiddle.net/5f3pbg8b/17/
.table.mobile {
display: none
}
.table.desktop {
display: inline
}
#media (max-width: 600px) {
.table.desktop {
display: none
}
.table.mobile {
display: inline
}
}
I have a table:
<table>
<thead>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 2</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 3</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 4</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
<tr>
<td>row 5</td>
<td class="editable">value 1</td>
<td class="editable">value 2</td>
</tr>
</tbody>
</table>
How can I select (using only CSS selectors) only one element from td.editable? Analog of jQuery :first selector will be acceptable.
You could use an n-th child selector. Use one to get at the exact table row that you want, then use a second n-th child to get at the exact <td> element you want.
For example if I wanted the second row, and the second <td> element with a class="editable" I could do this:
tr:nth-child(2) > td.editable:nth-child(2)
On compatible browsers, you can use the :nth-child pseudo-class
Is this your only table of td.editable's? Try something like this...
td.editable:nth-child(2) //or 3 or 4, etc...
Not sure this is what you want but try this:
table > tbody > tr > td:nth-child(2) {
color: red;
}
Demo
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>
I'm trying to customize the index pages in my admin section I've created with ActiveAdmin.
I want to set the size for each column in CSS2.
ActiveAdmin create a layout like:
<table [...] class="index_table">
<thead>
<tr>
<th class="sortable">Field 1</th>
<th class="sortable">Field 2</th>
<th class="sortable">Field 3</th>
<th class="sortable">Field 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
<td>value 4</td>
</tr>
</tbody>
</table>
I want to add a class or an id for each <th> section, as:
<table [...] class="index_table">
<thead>
<tr>
<th class="first sortable">Field 1</th>
<th class="second sortable">Field 2</th>
<th class="third sortable">Field 3</th>
<th class="fourth sortable">Field 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
<td>value 3</td>
<td>value 4</td>
</tr>
</tbody>
</table>
Maybe, it's not the best way to do it?
Any help appreciated...
Well, here's a way to do it:
In active_admin.css.scss you can add some styles to customise the index of the Headline model for example:
body.admin_headlines table.index_table thead tr th:nth-child(1) {
width: 100px !important;
}
body.admin_headlines table.index_table thead tr th:nth-child(2) {
width: 200px !important;
}
And so on...