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
Related
Hi I'm having trouble adding inline styling to table components in React. Basically what I'm trying to do is so that the table header/cells are divided equally spacing so I'm adding width: '50%' styling to make this work. I added in the console and it works, but when I return to add it in my code, it doesn't.
I tried adding it to anything just to see if it work and it doesn't. Is there something I'm missing?
What it looks like:
What I want it to look like (after adding width styling to console):
JSX:
<table className="table table-striped">
<thead>
<tr styles={{width: '50%'}}>
<th styles={{width: '50%'}}>Hello</th>
<th styles={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody>
{(data.length == 0)&&
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
}
</tbody>
</table>
As mentioned in the comments
Change 'styles' to 'style' – cidicles
Usually plural styles is the convention people use when passing a variable to another component, while singular style is the keyword that jsx-html tags will receive to inline the css.
Other answers recommend adding styles to html tags directly in the css. While adding styles on html tags directly without using classes may work it is worth it to note that it may not scale well This will require more work on us to come back and maintain/update the original code.
You can use table-layout: fixed; width: 100% on the table to force equal column widths:
table {
width: 100%;
table-layout: fixed;
}
table tr th {
text-align: left;
background: gray;
color: white;
}
<table className="table table-striped">
<thead>
<tr style={{width: '50%'}}>
<th style={{width: '50%'}}>Hello</th>
<th style={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
</tbody>
</table>
Your width: 50% isn't working most likely because your parent .table doesn't have a width set. You can try adding width: 100% to the table and then your 50% might work.
EDIT
As other users have mentioned, change styles to style as well.
I have a table to which a user can add new columns. The width hence is not fixed. How can I fix the header for such a table?
I tried:
display:block
overflow-x:hidden
overflow-y:auto
height:70%
in table body. It worked partially.
If I understand your question correctly (posting your HTML would help) you can nest a table inside the part that can be extended. You will be able to add as many columns (<td>) without effecting the table header.
table td table td {
border: solid 1px grey;
}
<table>
<tr>
<th>Add your fixed table header</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>New Columns</td>
<td>can be added</td>
<td>without effecting your header</td>
</tr>
</table>
</td>
</tr>
</table>
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%;
}
Putting 2 one-row tables after each other I get the desired outcome: 2 adjacent rows that don't have the same column width. http://jsfiddle.net/x2SQN/
---------------------
|100px | 100% - 100px|
---------------------
| 50% | 50% |
---------------------
Can I achieve this also with a single <table>?
http://jsfiddle.net/x2SQN/
Basically I cannot use javascript or not in-line css.
No. Within a table the columns remain consistent from top to bottom.
You can play around with the colspans of each cell but that's about it.
e.g. if you wanted you could do this.
<table>
<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>
<tr>
<td width="50%" colspan="2">50%</td>
<td width="50%">50%</td>
</tr>
</table>
But you will be limited to using a combination of fixed px sizes OR % sizes as you can't do 50% - 100px for example.
Usually, We transform block elements to the table model to achieve a 'Table like' display, and now, as a solution to your problem: I found myself doing just the opposite.
the main idea is to transform your table, to a block model design, where we can take control of the width of every element.
the main gain of my solution, is that you can use CSS function (like calc) to give responsive width to column [like calc(100% - 100px)].
but the main downsize of my solution is the scenario when you have different cells height in the same row.
luckily that can be easily fixed with faux columns techniques. (I used one-true-layout)
so, after all that been said, lets take a look at the solution: (some of it is written in the CSS section, with regular CSS selectors and not inline as you requested, because it was easier for me. but you can copy-past everything to the right place and make it all-inline)
Working Fiddle Tested on: Chrome, IE10, FF
HTML (I've add the <tbody> so you can apply the inline-CSS styling)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS (all of that styling can be placed inline)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}
You can do this using fake colspan values. Treat them as percentages to keep it simple.
<table border="0" cellspacing="6" width="400">
<tr>
<td colspan="30" style="background-color:red;" />
<td colspan="70" style="background-color:yellow;"/>
</tr>
<tr>
<td colspan="70" style="background-color:black;" />
<td colspan="30" style="background-color:pink;" />
</tr>
</table>
I have a table of users where each row contains their names, e-mail address, and such. For some users this row is one text line high, for some others two, etc. But I would like that each row of the table be one text line high, truncating the rest.
I saw these two questions:
A column of a table needs to stay in one line (HTML/CSS/Javascript)
CSS: limit element to 1 line
In fact my question is exactly similar to the first one, but since the link is dead I can't study it. Both answers say to use white-space: nowrap. However this doesn't work, maybe I'm missing something.
Since I can't show you the code, I reproduced the problem:
<style type="text/css">
td {
white-space: nowrap;
overflow: hidden;
width: 125px;
height: 25px;
}
</style>
<div style="width:500px">
<table>
<tr>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
<td>lorem ipsum here... blablablablablablablablablabla</td>
</tr>
</table>
</div>
Without white-space the table is 500px wide, and the text takes more than one line.
But white-space: nowrap makes the browser simply ignore the width directive and increase the width of the table until all data fits in one line.
What am I doing wrong?
Add the following code to your stylesheet:
table {
white-space: nowrap;
}
overflow will only work if it knows where to start considering it overflown. You need to set the width and height attribute of the <td>
TAKE 2
Try adding table-layout: fixed; width:500px; to the table's style.
UPDATE 3
confirmed this worked: http://jsfiddle.net/e3Eqn/
Add the following to your stylesheet:
table{
width: 500px; table-layout:fixed;
}
You need to add the table width to ensure that the next property will fit the elements to the specified size. The table-layout property here forces the browser to use a fixed layout within the 500 pixels it's given.
<table border="1" style="width:200px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">
Single line cell just do it</td>
<td>
multiple lines here just do it</div></td>
</tr>
</table>
Simple And Useful.
use above code for
<table border="1" style="width:200px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td nowrap="nowrap">Single line cell just do it</td>
<td>multiple lines here just do it</td>
</tr>
</table>