table width issue in twitter bootstrap - css

I have a three column layout, in which I have two tables connected back to back in the third column:
<div class="span2">
..
</div>
<div class="span7">
..
</div>
<div class="span3">
<h4>Betslips: </h4>
<table class="table table-stripped table-hover table-condensed" id="RecentContests">
<caption class="text-left">My Backs</caption>
<thead>
<tr></tr>
</thead>
<tbody>
<tr class ="success">
<td>King Rama</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Matched</td>
<td>X</td>
</tr>
<tr class ="success">
<td>The Favorite</td>
<td>1.5</td>
<td>550$</td>
<td>750$</td>
<td>Matched</td>
<td>X</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-hover table-condensed">
<caption class="text-left">My Lays</caption>
<tbody>
<tr class ="error">
<td>Dare Devil</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Pending</td>
<td>X</td>
</tr>
<tr class ="error">
<td>Irish Win</td>
<td>5.5</td>
<td>150$</td>
<td>2500$</td>
<td>Pending</td>
<td>X</td>
</tr>
</tbody>
</table>
When opened in browser it computes different widths for the tables, according to me it should be the same, any idea why is it happening and how to prevent it? I would like the second table to be the same width as of the first one.

By default, the tables will only be wide enough to accommodate their content, so there's little chance of them being the same width. To make them display the same width, consider setting a width via CSS. E.g.
table {width: 600px;}
or
table {width: 100%;}
You can also make the tables look more even and alike by adding
table {table-layout: fixed;}

It could be the span3 class in on the div, I've seen bootstrap, you might want to just size the table yourself.

Related

Razor: Table does not expand when a large screen is used

I am using in my ASP .NET Razor Page and it scales very nicely when i decrease the width of my browser. However, when i increase the width of my browser, it does not increase anymore. I want it to increase in size as it has too much white space on the sides.
In the code below i tried style="width:100%" or even changing the margins but it doesn't scale due to large screens. I also tried using container-fluid class and it doesn't work. Need a solution.
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Bob</td>
</tr>
<tr>
<td>2</td>
<td>Bobby</td>
</tr>
</table>
Try setting the display as table
display:table
If the table is inside any other tags like div, try setting it width to 100% as well and the display of div is block
Did you put the table in a container-flex? (Bootstrap 4) If not the 100% table width is the same as the normal Bootstrap container width where the table is in.
<div class="container-flex">
<div class="row">
<div class="col">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Bob</td>
</tr>
<tr>
<td>2</td>
<td>Bobby</td>
</tr>
</table>
</div>
</div>
</div>

Bulma table rows not spanning full width

I have a is-fullwidth Bulma table in my angular7 app which works fine. But now I need to add a angular component inside each row, and td tags lies inside that component. But when I do that, table rows not spans to its full width.
<table class="table is-fullwidth">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows">
<app-table-row [details]="row">
</app-table-row>
</tr>
</tbody>
</table>
table-row.component.html
<td>
<div *ngIf="!showField"> {{ details.name }} </div>
<div *ngIf="showField" class="field">
<div class="control">
<input [value]="details.name" class="input" type="text">
</div>
</div>
</td>
<td>{{ details.address }}</td>
This outputs the following
if I remove the angular component and add tds normally, it spans correctly. Like this.
Why is it not work when angular component added? And how should I fix it?
The reason this is happening is probably because the td elements are not direct children of the tr, but children of the app-table-row component.
Not sure that it would make sense in your case, but you can change the selector property in the app-table-row component to select the tr itself, like so:
#Component({
selector: 'tr[app-table-row]',
...
})
export class AppTableRowComponent {}
And use it like this:
<table class="table is-fullwidth">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rows" app-table-row [details]="row">
</tr>
</tbody>
</table>
This way the app-table-row is not a separate node in the DOM.

Why do my table's columns shift when a Bootstrap collapse is triggered?

Using bootstrap's collapse feature,
I would like to get a table's row to expand and reveal more details.
when a row is clicked, the other columns, for some reason, get a slight movement.
This seems to have something to do with the LENGTH of the details but I could not figure out a bypass.
<table class="table">
<thead>
<tr>
<td>title 1</td>
<td>title 2</td>
<td>title 3</td>
</tr></thead>
<tbody>
<tr>
<td data-toggle="collapse" href="#rowID">other columns move when you click me</td>
<td>im second </td>
<td>im third</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="rowID">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</td>
</tr>
</tbody>
</table>
you can see the issue in this bootply example:
https://www.bootply.com/HJfNNB5CPs
focus your eye on the other columns as you click the red text.
I'm not sure why this is happening but it seems to resolve if you explicitly set the width of the td containing the collapsable element.
td[colspan="3"] {
width: 100%;
}
updated bootply

Align text at each end of a column - Bootstrap

I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px

How to set the size of a column in a Bootstrap responsive table

How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond.
I'm using Bootstrap 3 (3.2.0)
<div class="table-responsive">
<table id="productSizes" class="table">
<thead>
<tr>
<th>Size</th>
<th>Bust</th>
<th>Waist</th>
<th>Hips</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>79 - 81</td>
<td>61 - 63</td>
<td>89 - 91</td>
</tr>
<tr>
<td>8</td>
<td>84 - 86</td>
<td>66 - 68</td>
<td>94 - 96</td>
</tr>
</tbody>
</table>
</div>
Bootstrap 4.0
Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xs to allow bootstrap to automatically detect the viewport.
<div class="container-fluid">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-1">Size</th>
<th class="col-3">Bust</th>
<th class="col-3">Waist</th>
<th class="col-5">Hips</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1">6</td>
<td class="col-3">79 - 81</td>
<td class="col-3">61 - 63</td>
<td class="col-5">89 - 91</td>
</tr>
<tr class="d-flex">
<td class="col-1">8</td>
<td class="col-3">84 - 86</td>
<td class="col-3">66 - 68</td>
<td class="col-5">94 - 96</td>
</tr>
</tbody>
</table>
bootply
Bootstrap 3.2
Table column width use the same layout as grids do; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.
<thead>
<tr>
<th class="col-xs-1">Size</th>
<th class="col-xs-3">Bust</th>
<th class="col-xs-3">Waist</th>
<th class="col-xs-5">Hips</th>
</tr>
</thead>
Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY.
Thanks to #Dan for reminding me to always work mobile view (col-xs-*) first.
You could use inline styles and define the width in the <th> tag. Make it so that the sum of the widths = 100%.
<tr>
<th style="width:10%">Size</th>
<th style="width:30%">Bust</th>
<th style="width:50%">Waist</th>
<th style="width:10%">Hips</th>
</tr>
Bootply demo
Typically using inline styles is not ideal, however this does provide flexibility because you can get very specific and granular with exact widths.
you can use the following Bootstrap class with
<tr class="w-25">
</tr>
for more details check the following page
https://getbootstrap.com/docs/4.1/utilities/sizing/

Resources