I have a simple table from Twitter Bootstrap v3.0.3. It is just 2 columns. Below is the html code for the table.
<table class="table table-bordered">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Address</td>
<td>Test</td>
</tr>
</tbody>
</table>
I would like the columns of the table to be closer to each other. How can this be done? Thank you.
If I understand correctly, you want the width of the table to fit the content.
The simplest way to do this would be to set width: auto:
<table class="table table-bordered" style="width: auto">
Related
I would like to have a table on my website that is a fixed size and allows for scrolling. Right now the table takes up the entire page because it has many rows of data. I want to limit the height and make the table scrollable so it does not take up the whole page. Here is my code for the table. I tried to wrap the table in a div and set overflow: auto but that did not seem to work.
<table class="table table-dark">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
Set table height fixed. Something like 300px or so. It makes a virtical scroll bar
Try follow code
<table class="table table-dark table-responsive" style="height:500px;width:100%">
<thead class="thead-light">
<tr>
<th>State</th>
<th>County</th>
<th>Total cases reported</th>
<th>Changes since last day</th>
</tr>
</thead>
<tr th:each="locationStat : ${locationStats}">
<td th:text="${locationStat.state}"></td>
<td th:text="${locationStat.country}"></td>
<td th:text="${locationStat.latestTotalCases}">0</td>
<td th:text="${locationStat.dailyChange}">0</td>
</tr>
</table>
I am using this react-bootstrap table:
which it's HTML code is:
<Table striped bordered hover>
<thead>
I was trying to add the code here.
<tr>
<th>#</th>
<th>App</th>
<th>Domain Name</th>
<th>Pub Account ID</th>
<th>Relationship</th>
<th>Certification ID</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox" id={'checkboxThick'+network.id} onClick={()=>this.checkCheckbox(network.id)}/></th>
<td>{network.product}</td>
<td>{network.domain_Name}</td>
<td>{network.publisher_Id}</td>
<td>{network.relationship}</td>
<td>{network.certification_Id}</td>
<td>{network.lastUpdate}</td>
<td className="actionCoulmn">
</td>
</tr>
</tbody>
</Table>
And I need to add this div as a part of the table:
I was trying to add some divs and styles to the <tr> and <th> with no success.
Does someone have any idea how to deal with it?
You could settle with this:
<div id="parent">
<div /> // your div here
<table /> // your existing table component
</div>
and use styling to merge them
Say i have 2 different tables using bootstrap:
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td>Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
I'm using bootstrap, how can i make it so that both tables are aligned? Both tables only have 2 columns each. I would like the 2nd column to match vertically.
It's so random how wide they are.
So lets say the first table's 2nd column is aligned at the center of the page
but the 2nd table's 2nd column is so far right of the page.
It looks like this
You can place both tables in a row, and then place each of the tables in their own container, giving each a class of col-6
using Bootstrap
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
or you can use CSS
Nevermind, i solved it. Only needed to add Style attribute inside my Table divisions.
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Name:</td>
<td></td>
</tr>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td style="width:50%;">Favorites:</td>
<td></td>
</tr>
</tbody>
</table>
now the 2nd column where all my variables i print out will align with each other.
I need to do table like this (on picture).
But it is important to be a bootstrap table, so what you see on picture can have only 3 table rows, not 6 because I want to use style
table class="table table-striped table-hover"
Is it possible?
The colspan and rowspan attribute should do the trick.
Try this code:
<div class="table-responsive" style='width:50%'>
<table class="table table-striped table-hover">
<tr>
<td rowspan="3">Name</td>
<td>Sex</td>
<td>Age</td>
</tr>
<tr>
<td colspan="2">Junmar Jose</td>
</tr>
<tr>
<td colspan="2">Weslie Andrea Lavita</td>
</tr>
<tr>
<td rowspan="3">Name</td>
<td>Sex</td>
<td>Age</td>
</tr>
<tr>
<td colspan="2">Junmar Jose</td>
</tr>
<tr>
<td colspan="2">Weslie Andrea Lavita</td>
</tr>
</table>
</div>
Here's a screenshot of the output:
This is just a dummy data to show how the columns and rows are separated.
Hope this helps! Goodluck!
I was simple table and I used bootstrap and classes table and table-striped. It works well.
<h3>Old table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr><td>Audi</td><td>A2</td></tr>
<tr><td>Audi</td><td>A3</td></tr>
<tr><td>Audi</td><td>A4</td></tr>
</tbody>
</table>
But now I have to complicate my table and use multiple tbody in tabled element (each tbody has two tr element). So bootstrap class table-striped does not work. There is any way to do it in bootstrap? The rows with cars should be table-striped but comment rows not.
<h3>Current table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A2</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A3</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A4</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
</table>
Plunker example
The work around for bootstrap would be much more complicated than just putting in your own custom classes. The bootstrap source for table-striped simply makes all odd rows the different color. That means that you're likely going to getting way further in depth and causing yourself way more trouble if you try to have bootstrap do it for you versus just putting in the classes yourself.
$('tbody').parents('.fixed-table-container').find('tr:even').addClass( 'even' );
.even { background: #f9f9f9; }
And in bootstrap.min.css find --> .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9} replace --> .table-striped>tbody>tr:nth-of-type(odd){background-color:none}