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...
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>
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.
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>
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;
}
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
}
}