I have a Bootstrap 3 table inside a div. It is defined like this:
<div id="todays-table">
<table class="table">
<thead>
<tr>
<th>Train Number</th>
<th>Status</th>
<th>Last Attempt</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>2001</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2005</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="success-row">
<td>2006</td>
<td>1</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2007</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2008</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2009</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2010</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2011</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2012</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
<tr class="danger">
<td>2013</td>
<td>0</td>
<td>2015-05-12 11:25:16</td>
</tr>
</tbody>
</table>
</div>
The problem is there is no padding on the table and it goes to the very edges of the web browser like this:
How do I add padding to this bootstrap table? I tried <div id="todays-table" style="padding: 20px;"> and table { padding: 20px; }, neither of which worked. Can someone point in the right direction on how to do this please?
You want margin, not padding:
#todays-table {
margin: 20px;
}
Demo
Better, set styles on a reusable class:
.padded {
margin: 20px;
}
<div id="todays-table" class="padded">
That said, Bootstrap's grid system does a nice job of that type of thing without additional CSS:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" id="todays-table">
Demo 2
http://getbootstrap.com/css/#grid
Try adding some styles to the tds themselves
div#todays-table > table.table td {
padding: 20px;
}
EDIT
Just re-read the question, this should be more what you are after:
div#todays-table > table.table {
margin: 20px;
}
Related
I have a table which is looping dynamically. Now I need to hide all <tr> with the class .dynamic-tr except 1st table's <tr class="dynamic-tr"> by using CSS.
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>John</td>
<td>100%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Alex</td>
<td>50%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Bryce</td>
<td>100%</td>
</tr>
</table>
I have tried with this CSS but its not working. Can somebody please suggest.
.dynamic-table .dynamic-tr {
display: none;
}
.dynamic-table:first-of-type .dynamic-tr {
display: block;
}
Use :not to achieve what you need.
table.dynamic-table:not(:first-child) .dynamic-tr {
display:none;
}
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>John</td>
<td>100%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Alex</td>
<td>50%</td>
</tr>
</table>
<table class="dynamic-table">
<tr class="dynamic-tr">
<th>Resource Name</th>
<th>Allocation</th>
</tr>
<tr>
<td>Bryce</td>
<td>100%</td>
</tr>
</table>
Does this satisfy your requirements ?
body > table > tbody > tr.dynamic-tr { display: none; }
body > table:first-of-type > tbody > tr.dynamic-tr {display: inline;}
Im added to Angular website for table ,that table col is not align ,any one know how to do that correctly ?
Thanks
<div class="table-responsive ">
<table class="table" style="width: 100%">
<thead>
<tr>
<th scope="col" width="50">ID</th>
<th scope="col" width="300">Book Name</th>
<th scope="col" width="250">Total Book</th>
<th scope="col" width="250">Date</th>
<th scope="col" width="250">Remarks</th>
<th scope="col" width="250">Booking Date</th>
<th scope="col" width="250">Booking Status</th>
</tr>
</thead>
</table>
</div>
<mat-accordion>
<mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
(closed)="panelOpenState = false">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
[expandedHeight]="customExpandedHeight">
<table class="table ">
<tbody>
<tr>
<td class="tb-td-txt" width="50">12</td>
<td class="tb-td-txt" width="300">ABC</td>
<td class="tb-td-txt" width="250">100}</td>
<td class="tb-td-txt" width="250">10-11-2018</td>
<td class="tb-td-txt" width="250">Jhone Doe</td>
<td class="tb-td-txt" width="250">10-05-2019</td>
<td class="tb-td-txt" width="250">Completed</td>
</tr>
</tbody>
</table>
</mat-expansion-panel-header>
</mat-accordion>
There are a few things...
the lower table is a child of .mat-expansion-panel, so for the table outside it, we mimic the padding:0 24px
but there is also a down arrow for mat-expansion-indicator so we gotta increase the padding on the right side by 8px
next, we text-align center for the bottom table (which is inside the mat-expansion) so that the effect is similar
I have also put a red borders on the <td> so that you can see this
relevant CSS:
th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}
complete working stackblitz here
I have a table that has six columns, five of which can be hidden based on user selection(s). The issue that I'm having is that when a column is hidden all other columns expand to fill the space that the hidden column occupied. What I would like to occur instead is for the column to just hide and the remaining columns shift to the left while retaining the widths that they were given. None of the answers that I have found on here seem to address this particular issue.
Below is snips of both my js and css along with screen grabs.
js:
<table className="hours table table-bordered table-sm" table-layout="fixed">
<thead>
<tr>
<th scope="col"
colSpan="3"
className="row-dow"
>
Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={this.state.kitchenHoursSame}
className="row-16"
>
Kitchen Hours
</th>
<th
scope="col"
colSpan="2"
align="center"
hidden={!this.state.breakfast}
className="row-16"
>
Breakfast Special
</th>
...
</tr>
<tr>
<th
scope="col"
// className="row-8 "
>
Day
</th>
<th
scope="col"
className="row-8"
>
Open
</th>
<th
scope="col"
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Open
</th>
<th
scope="col"
hidden={this.state.kitchenHoursSame}
className="row-8"
>
Close
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
1234567890123
</th>
<th
scope="col"
hidden={!this.state.breakfast}
className="row-8"
>
End
</th>
...
</tr>
</thead>
<tbody>
{this.state.DOW.map((dowList, i) =>
<tr>
<th scope="row" key={dowList.i}>{dowList.long}</th>
<td>
<select name="timeofday"
value={this.state.timeofday}
onChange={this.handleInputChange}>
<option>
(open)
</option>
</select>
</td>
...
</tr>
)}
</tbody>
</table>
css:
.hours {
table-layout: fixed;
/* width: 90%; */
width: 1500px;
white-space: nowrap;
}
.hours td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row-dow {
width: 20px;
}
.row-16 {
width: 16px;
}
.row-8 {
width: 8px;
}
Any help would be appreciated even if it is being told that I shouldn't be using tables and should be using something else.
The snippet below shows you how different width defined tables behave when a column is going to be deleted.
window.addEventListener("load", () => {
const firstTDs = Array.from(
document.querySelectorAll("td:nth-child(3)")
).concat(Array.from(document.querySelectorAll("th:nth-child(3)")));
document.querySelector(".remove").addEventListener(
"click",
() => {
firstTDs.forEach(td => {
td.parentNode.removeChild(td);
});
},
{ once: true }
);
});
.full-width {
width: 100%;
}
.fixed-width {
width: 600px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<h5>Auto width</h5>
<table class="tbl mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Full width</h5>
<table class="full-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Fixed width</h5>
<table class="fixed-width mdl-data-table mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Unit price</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>$2.90</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>$1.25</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>$2.35</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<h5>Actions</h5>
<button class="remove mdl-button mdl-button--raised">Remove Quantity</button>
If you have no problem rendering table content everytime, this can be handled using css property visibility: hidden; which hides the element with space occupied in the dom. See for : visibilty hidden
Approach :
Instead of using hidden attribute on th or td, i have used class = hideColumn which is defined to hide the element.
Next border: none to remove the border from the element.
In your case, you can also use 'class' attribute to achieve this.
If this is not helpful please let me know in the comments, or if anything can be done to take this near to required solution.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
}
.hideColumn {
visibility: hidden;
border: none;
}
h2 {
font-size: 12px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Approach 2:
Just make the text transparent.
.otherDiv table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
font-size: 10px;
border: 1px solid #dddddd;
}
.otherDiv .hideColumn {
color: transparent;
}
h2 {
font-size: 12px;
}
.otherDiv td, th {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<div class='otherDiv'>
<h2>Visible All Column Table</h2>
<table>
<tr>
<th >Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 1st Column Table</h2>
<table>
<tr>
<th class='hideColumn'>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr >
<td class='hideColumn'>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td class='hideColumn'>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<br>
<h2>Hidden 2nd Column Table</h2>
<table>
<tr>
<th >Company</th>
<th class='hideColumn'>Contact</th>
<th>Country</th>
</tr>
<tr >
<td >Alfreds Futterkiste</td>
<td class='hideColumn'>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td class='hideColumn'>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>
I have a bootstrap table, but I can't seem to get the text to align in the middle because the image expands the row.
I have tried adding vertical-align: middle to .table in my CSS, but it doesn't seem to do anything.
Example
https://jsfiddle.net/DTcHh/#&togetherjs=hy7S1lFDR3
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin- server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin- server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>
Answer
Twitter Bootstrap have a CSS class called text-center, you can simply use this one, as shown below.
Try this:
CSS
.mid-align:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
HTML
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class="table table-hover text-center">
<thead>
<tr>
<th class="text-center">Firstname</th>
<th class="text-center">Lastname</th>
<th class="text-center">Email</th>
<th class="text-center">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mid-align">John</td>
<td class="mid-align">Doe</td>
<td class="mid-align">john#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td class="mid-align">Mary</td>
<td class="mid-align">Moe</td>
<td class="mid-align">mary#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
<tr>
<td class="mid-align">July</td>
<td class="mid-align">Dooley</td>
<td class="mid-align">july#example.com</td>
<td><img src="http://fullsoftwarepro.com/wp-content/uploads/2015/07/Radmin-server-and-viewer-3.5-Crack-License-key-Download.jpg" width=50></td>
</tr>
</tbody>
</table>
</div>
As for specificity, declaring a style attribute inside a tag overwrites the style written in your *yourStyle*.css file, so in most cases it is not the best practice to declare the style inside the HTML element, but it is surely acceptable (just added a small note).
I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>