When I'm adding tr rows to an existing tbody, the table's width "magically" changes - why is that so / how to prevent that?
My HTML:
<table class="table table-hover table-sm" style="width: 50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
This table resides within a Bootstrap Grid column (within a fluid container, if that matters). In the beginning the table fills 50% of the width of the grid column, after adding rows via JavaScript the table's width changes and even outgrows the grid resulting in a bad design.
Add this class to your table
.is-breakable {
word-break: break-word;
}
Related
I have datatables inside of bootstrap cards, but when the table is larger than the height of the card, it will exceed outside of the card. I have an overflow: auto on a table-wrapper which also does not trigger once exceeding the cards height.
heres a simplified example:
https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css
I've forked you stackblitz (https://stackblitz.com/edit/js-bootstrap4-tsnbuq)
I've used a style attr here for simplicity. But the inner div is the item being overflowed, and then your outer div (which you have CSS which handles overflow) is adding scroll.
Here is the main change:
<div class="table-wrap">
<div style="height:690px">
<table class="table table-sm table-dark table-striped">
<thead>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
I'm using twitter bootstrap for my CSS on a project I'm working on.
as you can see in the image I've added, the width of my th cell is larger than the actual text I've added in it (which my bootstrap css automatically truncates). I want the red lines to start at the same point my blue line does. But this is being blocked from doing so because of the size of my th cell.
the code for my table is included below:
<table class="table bg-light table-sm table-responsive" style="width: 100%">
<tbody style="width:100%">
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">10.1</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">UNKNOWN</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
</tbody>
</table>
When I change the widths in the div/th cells and all parent tags to a pixel value instead of a percentage, the table does what I want (reduce the th cells size so that the red bars can start where the blue bar starts, text inside the cell becomes truncated) but when it is percentage values, the th cells stay as wide as the largest text in the column (in this case where it says "UNKNOWN").
You have to understand that HTML table will occupy the space it needs to display all the content inside it (it won't truncate it). So, if the table content asks for 2000px the table will respect it. Therefor, your cell width presented in percents will respect the table width. The only way you can really control the table cell width is to change the table layout:
table-layout: fixed;
But please note, it won't behave as a table it used to be. More about fixed table layouts here.
I have two tables inside a table :
<table>
<tbody>
<tr>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Giải</th>
<th>#cityID</th>
</tr>
</tbody>
</table>
</td>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Đầu</th>
<th>Đuôi</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
</tbody>
</table>
Now I need to set the width of the two tables fixed. How can I do that? For example I want all tables to have the same width as the first twos. I mean they must have a fixed width for each column, the first table will contains 70% width of the parent table, and the second contains the rest. The columns in the two tables must have fixed width too!
Not sure if I understood what you want but you can just select the required element of the table or the whole table and give a width in css
table {
width: 70%;
}
If you have multiple tables, give them ids or classes to seperate for different styles. Same for the th, tr, td and so on.
First of all, why not going Tableless?
Then you have to put some CSS into it, like DasBoot said, to give a full table a width you should do this:
table {
width: 70%;
}
The same thing for specific td, tr, th or whatever element you want to style. If what you are going for is a maximum width or a minimum width you can use max-width and min-width appropriately. Why not put this code on a jsfiddle and test the results live to see what you need to do?
Regards.
Check out this fiddle:
http://jsfiddle.net/foreyez/hQ9ZR/
<table background='red'>
<thead>
<tr>
<th style='width:3000px;background:red'>Students</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Shmoe</td>
</tr>
</tbody>
and the css is:
html,body { overflow:auto; }
When I make the width of the Header 3000px I'd expect it to cause an overflow (scrollbar) in the page. But it doesn't. It's because the width of the header cell doesn't change the overall table's width.
If you set the width of the table to 3000px, you'll see the overflow (scrollbar)
So basically, I'm wondering if there's a way to make it so the table's width is defined by it's headers widths?
Thanks
First of all this is not the way you style tables these days
<table background='red'>
use this instead
<table style="background:red;">
And secondly you need to use min-width for th instead of width
My Fiddle
<th style='border: 1px solid #fffff0;min-width:5000px;background:red'>Students</th>