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!
Related
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 have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
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">
I'm trying to align an image with text in a table such that the image is aligned to the bottom of the text.
The current code I have for the table is:
<table class="table table-striped">
<thead>
<tr>
<th><h4><img src="image.png" />Title1</h4></th>
<th><h4><img src="image2.png" />Title2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
</tbody>
</table>
It currently looks like this:
How do I make the image align to the bottom of the text?
Maybe this will do it...
<table class="table table-striped">
<thead>
<tr>
<th><h4><img src="image.png" style="vertical-align: text-bottom;" />Title1</h4></th>
<th><h4><img src="image2.png" style="vertical-align: text-bottom;" />Title2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
<tr>
<td>Subtitle1</td>
<td>Subtitle2</td>
</tr>
</tbody>
</table>
It uses the style attribute -VERTICAL-ALIGN and assigns the value TEXT-BOTTOM