i have table structures like this
<table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1">
<tbody>
<tr>
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
<th scope="col">HEADER 3</th>
<th scope="col">HEADER 4</th>
</tr>
<tr>
<td>DATA 1</td>
<td>DATA 2</td>
<td>DATA 3</td>
<td>DATA 4</td>
</tr>
</tbody>
</table>
based on this structures, i want to draw the header table with color. i've do this CSS but nothing happened
<style>
.dgrid th scope {
color: #18bc9c;
}
</style>
You need to use the attribute selector [attribute="value"]
.dgrid th[scope="col"] {
color: #18bc9c;
}
<table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1">
<tbody>
<tr>
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
<th scope="col">HEADER 3</th>
<th scope="col">HEADER 4</th>
</tr>
<tr>
<td>DATA 1</td>
<td>DATA 2</td>
<td>DATA 3</td>
<td>DATA 4</td>
</tr>
</tbody>
</table>
Related
I have a problem, this is my code:
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th colspan="9" style="text-align: center">Main Header</th>
</tr>
</thead>
<tr>
<th>checkbox</th>
<th>columna 1</th>
<th>columna 2</th>
<th>columna 3</th>
<th>columna 4</th>
<th>columna 5</th>
<th>columna 6</th>
<th>columna 7</th>
<th>columna 8</th>
<th>columna 9</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>coso 1</td>
<td>coso 2</td>
<td>coso 3</td>
<td>coso 4</td>
<td>coso 5</td>
<td>coso 6</td>
<td>coso 7</td>
<td>coso 8</td>
<td>coso 9</td>
</tr>
<tr>
<th></th>
<th>columna 1</th>
<th>columna 2</th>
<th>columna 3</th>
<th>columna 4</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>coso 1</td>
<td>coso 2</td>
<td>coso 3</td>
<td>coso 4</td>
</tr>
</table>
I'm using Bootstrap, the problem is that the fourth and fifth row are shorter than the others, what I want to do is that those td fill all the width without colspan, because the rows come from the server and I don't know how many come, I only know that the biggest amount of columns is 9, what I'm trying to do is fill all the width to not have white space at the right of the shorter rows.
Is it possible to separate each row using a margin, in a striped table in bootstrap v4. I want each row to spaced out a little to be more readable.
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Table rows does not have margin values. You may consider to use padding values to td.
For reference :
.table td{
padding-bottom: 10px;
}
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
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'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...