I have a bootstrap table as follows:
<table class="table table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
The two column are equally spaced which is fine but if i drop an <input> element in to one of the columns this column stretches to take up about 3/4 of the overall table.
http://www.bootply.com/115049
My question is why does it do this and how can I control it?
Any help much appreciated.
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-10">Col1</th>
<th class="col-md-2">Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
This is down to the way HTML tables work. By default, table cells will scale according to their contents - any size you give them is used as a guide. So, for instance:
td {
width: 50%;
/*
If this cell is empty, it will take up half of
the table. But if the content needs to, it will
expand to take up more space.
*/
}
You can work around this by setting table-layout: fixed; in your CSS:, e.g.
table.fixed {
table-layout: fixed;
}
This makes tables adhere more strictly to the dimensions you set in CSS, rather than what the content dictates. See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information.
Once this is done, you can apply the normal Bootstrap grid classes to control the width. Apply them to the cells (td or th) in the first row and they'll repeat all the way down.
Why ? I don't know :)
How to control it ?
You can simply but a width parameter to your td, such as :
<td width=50%><input type="text"></td>
You can do it like this, or using your css file by saying all from this class should take half of the table width.
td {
width: 50%;
}
Related
I have a two column layout in sharepoint online and upon page inspection I can see that it has a table with two columns. I'm trying to hide one of the columns for printing, which is working just fine, but sharepoint has specified the width of the first column as 66%. It has no class or id. I cannot change this.
I am able to change the width of the column, but the problem I'm seeing is then that the % of the columns on the inside table is also changing, even when I use a specification of nth-child(1) on the id of the outer table.
I won't submit you to the mess of code that is sharepoint but the layout is like this:
<table>
<tbody>
<tr>
<td>
<table width="100%>
<tbody>
<tr>
<td style="width: 25%>></td> <-this is getting stretched.
<td style="width: 25%>></td>
<td style="width: 25%>></td>
<td style="width: 25%>></td>
</tr>
</tbody>
</table>
</td>
<td>
</td>
</tr>
</tbody>
</table>
#media print {
table#layoutsTable td:nth-child(1) {
width: 100% !important;
}
}
I have three tables, First Table margin-top is 50px and second table have variation rows depends on the text but the Third table I want to fix margin-top is :150px standard.
but third table not able to fix it on margin-top:150px because the second table have variation of the rows.
How to fixed the third table on margin-top:150px even-though the second table have variation rows?
for example :
Table 1
Name : Balakrishnan
Table 2 <br>
S.No particulars Amount <br>
1 Desk 200 <br>
Table 3
Total : 200
I want to fix constant position of the table 3 even though table2 rows increased
! when rows increased table 2 the third table should not move to down
I have tried the following code
.table1
{
margin-top:10px;
}
.table2
{
margin-top:15px;
}
.table3
{
margin-top:30px;
}
the above code defined in
the table class
please click the above link to view my picture
If I understand what you are asking the best solution is the following:
Wrap all the tables in a div
Give the middle div a fixed height and overflow: auto
HTML:
<div>
<table>
<tr>
<th>Name</th>
<td>Balakrishnan</td>
<td>Age</td>
<td>25</td>
</tr>
</table>
</div>
<div class="fixed">
<table>
<tr>
<th>S.No</th>
<th>Particulars</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Item1</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>1</td>
<td>50</td>
</tr>
<tr>
<td>3</td>
<td>Item3</td>
<td>1</td>
<td>50</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<th>Total:</th>
<td>250</td>
</tr>
</table>
</div>
CSS:
.fixed {
height: 150px;
overflow-y:auto;
margin: 20px 0 ;
}
Example:
http://jsfiddle.net/podjpv8j/
More Rows Example:
http://jsfiddle.net/podjpv8j/1/
I'm not sure what you want to do with the box in the middle. Meaning do you want it to adjust with the page, or scroll when it gets too much information in it. What it sounds like is you want a footer style box that stays in the same position though out the page. Check out this how-to site and follow the instructions to the footer.
This should help you understand how the 3rd box will stay in a "fixed position".
http://learnlayout.com/position-example.html
I'm writing an angular email app and have used bootstrap tables in my mail template.
The body of the message is large and I would like to limit this to be just a single line, something similar to how gmail does it. Right now, my cell auto sizes which increases the size of the overall row. I used a couple of angular filters to limit the characters but I don't think that's all that Gmail is doing. There is some sort of an overflow hidden applied to the table row and also the height of each row is consistent.
How do I tweak my table css so that the row does not auto size when the cell data is a lot?
My HTML Code : http://pastebin.com/13jd9EfqI'm using the latest version of bootstrap css.
I know you'd want overflow: hidden and white-space: nowrap styles. If you want you can also add the text-overlow: ellipsis style for a nice effect. You can use table-layout: fixed to ignore the size of the contents of the cells and only look at the heading sizes, otherwise automatic column sizing can take into account the full width of the string (fiddle):
table.special { table-layout: fixed }
table.special th { width: 20% }
table.special th.content { width: 40% }
table.special td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
On your <tr> tags you should add style="width:[desired width]" so they don't resize, example:
<table class="table table-responsive table-striped table-hover">
<thead>
<tr>
<th style="width: 100px">MessageID</th>
<th style="width: 100px">Sender</th>
<th style="width: 100px">Content</th>
<th style="width: 100px">Date</th>
</tr>
</thead>
<tbody>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
</tbody>
</table>
You can change the text of the <td> tags and it won't resize. You might want to add a padding to the left on your <td> tags so they are more 'inline' with the <tr> tag's text. DEMO
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
There is a table which I have given border. After giving border there were double border that were coming after some googling I found that border-collapse is my saviour. but after trying to use it in every possible way it is not working.
There is a double border at the bottom that is coming that I want to remove.
For better understanding attached screen shot:
I want to remove the double border coming after each cell.
Markup.
<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse;">
<thead>
<tr>
<th >
Login Name
</th>
<th>
SheetName
</th>
</tr>
</thead>
<tr>
<td>aaa</td>
<td>abc</td>
</tr>
<tr>
<td>asdfasdf</td>
<td>aasdfsadfbc</td>
</tr>
</table>
CSS is needed to provide a definite answer. As others said, make sure there aren't any global CSS files altering your HTML. It appears your CSS has a tr {margin-top:10px;} set in it, or something providing a similar effect.
Just out of curiosity, why are you using the HTML cellpadding attribute? The CSS padding attribute can perform the same function and provides much more flexibility. You will also find separating your styles (CSS) from your HTML will make changing and updating much easier than going back to modify each inline style.
<table id="table">
<thead>
<tr>
<th >
Login Name
</th>
<th>
SheetName
</th>
</tr>
</thead>
<tr><td>aaa</td><td>abc</td></tr>
<tr><td>asdfasdf</td><td>aasdfsadfbc</td></tr>
</table>
CSS:
#table {
padding: 10px 5px 10px 5px;
//this is shortand for top right bottom left
border-collapse: collapse;
//this is becoming deprecated and is mainly used to support older versions of IE
}