Rogozin
Reputation: 45
Create equal table layout regardless of the data inside
thanks for reading.
I'm trying to align a few tables on a page. Ideally, I want each table to stretch 100% width of its parent element. I just want the table layout to look the same, regardless of the data put inside of it. At the moment something is dictating how wide the tables are appearing and I can't figure out what it is.
As you can see the image shows that the tables are not similar in width. I want them all to look aligned if possible (similar / fixed width that they take on regardless if they have data inputs like "1", "2", "3" or long strings).
This is a partial snippet - there's more code to the page but I think this should be suffice
.card-body {
padding: 1.5rem;
flex: 1 1 auto;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.table {
width: 100%;
background-color: transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
<div class="row">
<div class="col-12">
<h2><span class="text-warning">Room</span></h2><br>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td></td>
<td></td>
<td>1<br>Living</td>
<td>2<br>Dining</td>
<td>3<br>Hall</td>
<td>4<br>Kitchen</td>
<td>5<br>Bath</td>
<td>6<br>Bed 1</td>
<td>7<br>Bed 2</td>
<td>8<br>Bed 3</td>
<td>9<br>Bath 2</td>
<td>10<br>Hall 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Design room temperature</td>
<td><strong>°C</strong></td>
<td>21</td>
<td>21</td>
<td>18</td>
<td>18</td>
<td>22</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>22</td>
<td>18</td>
</tr>
<tr>
<td>Temperature difference</td>
<td><strong>K</strong></td>
<td>24.4</td>
<td>24.4</td>
<td>21.4</td>
<td>21.4</td>
<td>25.4</td>
<td>21.4</td>
<td>21.4</td>
<td>21.4</td>
<td>25.4</td>
<td>21.4</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Length</td>
<td><strong>m</strong></td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>height</td>
<td><strong>m</strong></td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
</tr>
<tr>
<td>Width</td>
<td><strong>m</strong></td>
<td>4</td>
<td>3.5</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
<div class="row mt-4">
<div class="col-12">
<h2><span class="text-warning">Ventilation Heat Loss</span></h2><br>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td></td>
<td></td>
<td>1<br>Living</td>
<td>2<br>Dining</td>
<td>3<br>Hall</td>
<td>4<br>Kitchen</td>
<td>5<br>Bath</td>
<td>6<br>Bed 1</td>
<td>7<br>Bed 2</td>
<td>8<br>Bed 3</td>
<td>9<br>Bath 2</td>
<td>10<br>Hall 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Air change per hour</td>
<td><strong>/h</strong></td>
<td>1.5</td>
<td>1.5</td>
<td>1.5</td>
<td>2.0</td>
<td>2.0</td>
<td>1.0</td>
<td>1.0</td>
<td>1.0</td>
<td>2.0</td>
<td>1.5</td>
</tr>
<tr>
<td>Air volume heated per hour</td>
<td><strong>m3/h</strong></td>
<td>105</td>
<td>52.5</td>
<td>37.5</td>
<td>60</td>
<td>30</td>
<td>22.5</td>
<td>20.7</td>
<td>27.6</td>
<td>18.4</td>
<td>3.45</td>
</tr>
<tr>
<td>Air spec heat capacity</td>
<td><strong>W/m3k</strong></td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
</tr>
<tr>
<td>Ventilation heat loss</td>
<td><strong>W</strong></td>
<td>871</td>
<td>436</td>
<td>273</td>
<td>437</td>
<td>259</td>
<td>164</td>
<td>151</td>
<td>201</td>
<td>159</td>
<td>25</td>
</tr>
<tr>
<td>Ventilation energy requirement</td>
<td><strong>kWh p.a.</strong></td>
<td>2078</td>
<td>1039</td>
<td>742</td>
<td>1187</td>
<td>594</td>
<td>445</td>
<td>410</td>
<td>546</td>
<td>364</td>
<td>68</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
</div>Upvotes: 0
Views: 48
Answers (2)
w3cy5e5
Reputation: 150
Check this, create a new HTML file and add the following code (the entire thing):
<style type="text/css">
.card-body {
padding: 1.5rem;
flex: 1 1 auto;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.table {
width: 100%;
background-color: transparent;
}
td{
border: 1px solid #000;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="row mt-4">
<div class="col-12">
<h2><span class="text-warning">Room</span></h2><br>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td></td>
<td></td>
<td>1<br>Living</td>
<td>2<br>Dining</td>
<td>3<br>Hall</td>
<td>4<br>Kitchen</td>
<td>5<br>Bath</td>
<td>6<br>Bed 1</td>
<td>7<br>Bed 2</td>
<td>8<br>Bed 3</td>
<td>9<br>Bath 2</td>
<td>10<br>Hall 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Design room temperature</td>
<td><strong>°C</strong></td>
<td>21</td>
<td>21</td>
<td>18</td>
<td>18</td>
<td>22</td>
<td>18</td>
<td>18</td>
<td>18</td>
<td>22</td>
<td>18</td>
</tr>
<tr>
<td>Temperature difference</td>
<td><strong>K</strong></td>
<td>24.4</td>
<td>24.4</td>
<td>21.4</td>
<td>21.4</td>
<td>25.4</td>
<td>21.4</td>
<td>21.4</td>
<td>21.4</td>
<td>25.4</td>
<td>21.4</td>
</tr>
<tr>
<td>Length</td>
<td><strong>m</strong></td>
<td>7</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>height</td>
<td><strong>m</strong></td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.5</td>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
<td>2.3</td>
</tr>
<tr>
<td>Width</td>
<td><strong>m</strong></td>
<td>4</td>
<td>3.5</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
</div>
<div class="row mt-4">
<div class="col-12">
<h2><span class="text-warning">Ventilation Heat Loss</span></h2><br>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td></td>
<td></td>
<td>1<br>Living</td>
<td>2<br>Dining</td>
<td>3<br>Hall</td>
<td>4<br>Kitchen</td>
<td>5<br>Bath</td>
<td>6<br>Bed 1</td>
<td>7<br>Bed 2</td>
<td>8<br>Bed 3</td>
<td>9<br>Bath 2</td>
<td>10<br>Hall 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Air change per hour</td>
<td><strong>/h</strong></td>
<td>1.5</td>
<td>1.5</td>
<td>1.5</td>
<td>2.0</td>
<td>2.0</td>
<td>1.0</td>
<td>1.0</td>
<td>1.0</td>
<td>2.0</td>
<td>1.5</td>
</tr>
<tr>
<td>Air volume heated per hour</td>
<td><strong>m3/h</strong></td>
<td>105</td>
<td>52.5</td>
<td>37.5</td>
<td>60</td>
<td>30</td>
<td>22.5</td>
<td>20.7</td>
<td>27.6</td>
<td>18.4</td>
<td>3.45</td>
</tr>
<tr>
<td>Air spec heat capacity</td>
<td><strong>W/m3k</strong></td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
<td>0.34</td>
</tr>
<tr>
<td>Ventilation heat loss</td>
<td><strong>W</strong></td>
<td>871</td>
<td>436</td>
<td>273</td>
<td>437</td>
<td>259</td>
<td>164</td>
<td>151</td>
<td>201</td>
<td>159</td>
<td>25</td>
</tr>
<tr>
<td>Ventilation energy requirement</td>
<td><strong>kWh p.a.</strong></td>
<td>2078</td>
<td>1039</td>
<td>742</td>
<td>1187</td>
<td>594</td>
<td>445</td>
<td>410</td>
<td>546</td>
<td>364</td>
<td>68</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /col -->
</div><!-- /row -->
</div>
</body>
</html>The output should look like this:
Upvotes: 2
Rogozin
Reputation: 45
Solved.
The problem was that another dev has put empty TR to provide a visual gap between specific table rows - this empty row had loads of empty TD that messed with width.
Thanks Shannon A
Upvotes: 0
Related Questions
- Use flex-box to display table with columns having unequal width
- Bootstrap flex equal width columns without html table
- How to make every element in flex-box equal?
- Responsive table and display flex (Bootstrap)
- Equal height columns with Bootstrap 3 and flexbox
- Equal flexbox grid with different sized content + dividers
- How to get equal height columns childs in Bootstrap 4?
- Use flex to get columns that have different amounts of rows to have the same height
- align equal column without using table
- Bootstrap to have columns with same height