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
}
}
Related
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 know I could do this easily by specifying an id but I want to practice with pseudo selectors.
I have two tables within a view. Using pseudo selectors:
I want to grab the first table only.
within that first table's <tbody>
I want to grab the first <tr> and color all the text red.
My current implementation almost works. The issue is that it does this styling for every table in the view. I want this styling to happen only for the first table.
tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Use another pseudo selector for the table:
table:nth-of-type(1) tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
You could take it a step further with the pseudo selectors since you already know you're targeting the first table and use :first-of-type which works similarly as :nth-of-type(1)
table:first-of-type tbody tr:first-child {
color: red;
}
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
Wrap the tables in a container element and then apply this CSS
.container > :first-child tr:first-child td:last-child {
color: red;
}
<div class="container">
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T1 R1 Col 1</td>
<td>This row should all be red</td>
</tr>
<tr>
<td>T1 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
</tr>
</thead>
<tbody>
<tr>
<td> T2 R1 Col 1</td>
<td>This row should NOT be red</td>
</tr>
<tr>
<td>T2 R2 Col 1</td>
<td>foobar</td>
</tr>
</tbody>
</table>
</div>
Note: This will apply the CSS to the first table in every .container element. Just specify an ID instead and it shouldn't be a problem
Is there a way in CSS to achieve alternate row shading all rows across multiple tbody elements are treated as one group?
So for example:
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
<tbody>
<tr>...</tr>
</tbody>
I know of nth-child, but that would not work here, since if each tbody only has one row, then they would all get coloured the same.
Anyone know of any ways to achieve this behaviour?
Not with CSS...no. nth-of- doesn't work that way. You would need Javascript.
Jquery makes this easy.
$("#my-table tr:even").css("background-color", "#bbbbff");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 3.1</td>
</tr>
<tr>
<td>Row 3.2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 4.1</td>
</tr>
<tr>
<td>Row 4.2</td>
</tr>
<tr>
<td>Row 4.3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 5</td>
</tr>
</tbody>
</table>
#my-table tbody
{
display: block;
margin: 20px auto;
}
#my-table tbody tr
{
background-color: #d88;
}
#my-table tbody:nth-child(even) tr
{
background-color: #8d8;
}
#my-table tbody:nth-child(even) tr:nth-child(even)
{
background-color: #d88;
}
#my-table tbody:nth-child(odd) tr:nth-child(odd)
{
background-color: #8d8;
}
<table id="my-table">
<tbody>
<tr><td>Row 1</td></tr>
</tbody>
<tbody>
<tr><td>Row 2</td></tr>
<tr><td>Row 2</td></tr>
</tbody>
<tbody>
<tr><td>Row 3</td></tr>
<tr><td>Row 3</td></tr>
<tr><td>Row 3</td></tr>
</tbody>
<tbody>
<tr><td>Row 4</td></tr>
</tbody>
<tbody>
<tr><td>Row 5</td></tr>
</tbody>
</table>
If the number of rows in your html markup are the same in each tbody you can use following CSS solution:
#my-table tbody:nth-child(odd)
{
background-color: red;
}
#my-table tbody:nth-child(even)
{
background-color: yellow;
}
<table id="my-table">
<tbody>
<tr>
<td>Row 1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Row 5</td>
</tr>
</tbody>
</table>
Otherwise you can consider using CSS3 :nth-child() Selector, example nth-child(2) to select an element at a specific index.
Alternatively you can use JavaScript, answer from #Paulie_D will solve your issue.
#tb1 tr:nth-child(1){
background-color: green;
}
#tb1 tr:nth-child(2){
background-color: red;
}
#tb2 tr:nth-child(1){
background-color: green;
}
#tb3 tr:nth-child(1){
background-color: red;
}
#tb3 tr:nth-child(2){
background-color: green;
}
#tb3 tr:nth-child(3){
background-color: red;
}
#tb4 tr:nth-child(1){
background-color: green;
}
#tb5 tr:nth-child(1){
background-color: red;
}
<table id="my-table">
<tbody id="tb1">
<tr>
<td>Row 1a</td>
</tr>
<tr>
<td>Row 1b</td>
</tr>
</tbody>
<tbody id="tb2">
<tr>
<td>Row 2a</td>
</tr>
</tbody>
<tbody id="tb3">
<tr>
<td>Row 3a</td>
</tr>
<tr>
<td>Row 3b</td>
</tr>
<tr>
<td>Row 3c</td>
</tr>
</tbody>
<tbody id="tb4">
<tr>
<td>Row 4</td>
</tr>
</tbody>
<tbody id="tb5">
<tr>
<td>Row 5a</td>
</tr>
</tbody>
</table>
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'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...