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.
Related
I am using Bootstrap V4 alpha 6 along with Angular 5 to create a table with a fixed header when scrolling. However, I can't seem to get it to work.
Note: The navbar is fixed-top
Things I've tried:
1) Add fixed-top class to thead.
2)
thead {
position: sticky;
top: 0;
}
3)
thead {
display:block;
}
4) Lots of CSS but nothing works because the table is responsive and scrollable and there are multiple header rows.
What am I doing wrong?
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./assets/logo.png" width="200" height="40" class="d-inline-block align-top" alt="">
</a>
</nav>
<table class="table table-responsive w-100 d-block d-md-table table-bordered table-striped table-fixed">
<thead class="sticky-top">
<tr>
<th colspan="16" class="text-center">PROJECT 1</th>
</tr>
<tr>
<th rowspan="2">WON</th>
<th rowspan="2">LST #</th>
<th rowspan="2">FLR #</th>
<th colspan="3">GLS</th>
<th colspan="7">FRMS</th>
<th rowspan="2">Scheduled Date</th>
<th rowspan="2">Cmplt Date</th>
</tr>
<tr>
<th>G Reqd</th>
<th colspan="2">G Rcvd (%)</th>
<th>Frms Reqd</th>
<th colspan="2">Frms Ass (%)</th>
<th colspan="2">Frms Line (%)</th>
<th colspan="2">Frms Cmplt (%)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let project of projectData">
<td>{{project.ordernumber}}</td>
<td>{{project.ListNumber}}</td>
<td>{{project.floorID}}</td>
<td>{{project.glassRequired}}</td>
<td>{{project.glassReceived}}</td>
<td>{{project.glassReceivedPercent}}</td>
<td>{{project.framesRequired}}</td>
<td>{{project.framesAssembled}}</td>
<td>{{project.framesAssembledPercent}}%</td>
<td>{{project.framesGlazed}}</td>
<td>{{project.framesGlazedPercent}}%</td>
<td>{{project.framesShipped}}</td>
<td>{{project.framesShippedPercent}}%</td>
<td>{{project.deliverydate}}</td>
<td>Not Shipped Yet</td>
</tr>
</tbody>
</table>
I've also created a plnkr.
The easiest way to achieve this is to create your own JavaScript function to manipulate the behavior as required. Play around with the following snippet code to meet your expectations.
document.onscroll = function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$("thead").css({
"position": "fixed",
"top": "0px"
});
$("th").css({"padding":"15px 66px", "margin":"auto"});
} else {
$("thead").css({
"position": "relative",
"top": "0px"
});
}
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-borderless table-hover">
<thead class="thead-dark">
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
<tr>
<td>Sam Tomashi</td>
<td>Male</td>
<td>D.R.Congo</td>
</tr>
<tr>
<td>Molly Akinyi</td>
<td>Female</td>
<td>Kenya</td>
</tr>
<tr>
<td>John Doe</td>
<td>Male</td>
<td>France</td>
</tr>
</tbody>
</table>
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>
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
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...