Here is my html but when I measure the last td its way longer then 300px...any idea?
<table width='400'>
<tr>
<th colspan='2' style='text-align:left;'><br /><br />Beginner<br /><br /></th>
</tr>
<tr>
<th>Title</th>
<th>another Deal</th>
<th>Users</th>
</tr>
<tr>
<td>SomeDat</td>
<td>0/38</td>
<td style="width:300px">
<span class="red"></span> <span class="yellow"></span></td>
</tr>
<tr>
<td>Git</td>
<td>28/38</td>
<td style="width:300px">
<span class="red">something,something,something,something,something,something,something,something,something,something,something, ,something,something,something,something,something</span> <span class="yellow">test</span></td>
</tr>
</table>
The table will expand to the width needed for its widest element. "something,something,..." is a very long unbreakable word, and is forcing your table wider than you want it.
If you add spaces, the text will wrap. If you want to clip long unbreakable words, try overflow:hidden in the style.
As Ned said, the long word is causing the cell to expand.
You can partially solve this by adding word-wrap: break-word; to the style attribute of the table cell. This will cause the word to break when it reaches the limits of the table cell. Fully supported in IE and any CSS3-supporting browsers.
Related
I have added a <h4> tag in a <td> element and rotated 90 degrees,
so that both the <td> and <h4> are rotated.
Issue:
If my <h4> content is bigger or contains a space it comes in a new line.
How I can fix this? I need to put all the content in a single line in the <td>.
nowrap Attribute is what you need.
<table>
<tr>
<th>Poem</th>
<th>Poem</th>
</tr>
<tr>
<td nowrap><h4>Never increase, beyond what is necessary</h4></td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
When I put a table within a fixed-width container and the sum of the widths of the columns exceeds the container width, as a general rule, I observe the table won't overflow the container, but the columns will be rendered narrower than their styled width.
But I also observed some cases where the table indeed does overflow. One case that especially puzzles me is shown here (or in this Fiddle):
<div style="width:750px;border:1px solid black">
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">
<input style="width: 210px;">
</td>
</tr>
<tr>
<td style="width: 200px"></td>
<td><input style="width: 200px;"></td>
</tr>
</table>
</td>
<td>
<input style="width:400px">
</td>
</tr>
</table>
</div>
In Chrome (40.0), the column widths are preserved and the table overflows. In IE and FF, the table fits the container and the columns are shortened.
Is there a general rule for "squeezing" tables into containers? Is Chrome is buggy? Or is such convoluted table design hoplessly beyond specification?
You can set those width of the input to max-width:100% and width:100%
take a look at this https://jsfiddle.net/ky2okqy5/6/
UPDATED https://jsfiddle.net/ky2okqy5/7/
In my HTML table sometimes I have long words in my cells. So I need to break some words if they overflows its area.
This questions shows how to break table cell: Word-wrap in an HTML table
This css style is recommended : style="word-wrap: break-word; table-layout: fixed; width: 100%"
But if I use table-layout:fixed, my columns becomes equal sized. But in my case width is 100% for table and if table is fixed then columns share width equally. But this takes too much height from page.
My fiddle: http://jsfiddle.net/mavent/Y54s9/17/
What I need ?
- My table has 2 columns, I want second column to be as narrow as possible.
- 2nd column's width shouldn't exceed column's name.
- Column names shouldn't be wrapped. < th > names mustn't be wrapped.
- 1st column should be wide. I don't prefer to fixate column width like %60, %70 etc. But if it is a solution I can use fix column width, but responsiveness must be taken into account.
- Table should be responsive. I will use this table in mobile layouts.
- Word must be wrapped strictly if word exceeds the cell width. For example if cell can take max 40 characters and word is 45 characters, word can be breaked whatever 41. character is.
Output should look like this in small and big screens:
Code:
.myclass1 {
white-space: normal;
}
.myclass2 {
word-wrap: break-word;
table-layout: fixed;
}
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass2" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>
It seems that with HTML and CSS, you cannot cause automatic word breaking in table cells without making table columns of fixed width and using table-layout: fixed). And you cannot specify that one column be just as narrow as it needs and the other column take all the rest (when table-layout: fixed is used).
However, there’s a rather simple JavaScript workaround, though for a large table, it might cause inefficiency (and a flash from initial layout to modified layout). You would not set fixed layout initially, or column widths, just a total width of 100%. You would thus let the browser format the table in automatic layout, so that the second column becomes just as wide as it needs to be (assuming there is enough content in the other column, as we can expect here). Then you just get the width of the second column and explicitly set it on the header cell and you set table layout to fixed.
Sample code:
<style>
#mytable {
word-wrap: break-word;
width: 100%;
}
</style>
...
<table id="mytable"
...
<script>
window.onload = function() {
var t = document.getElementById('mytable');
var th2 = t.rows[0].cells[1];
th2.style.width = th2.clientWidth + 'px';
t.style.tableLayout = 'fixed';
}
</script>
P.S. I still think this is an all wrong approach, unless the cell content is some code of very special kind, like a DNA sequence, that can really be broken at any point. For any normal and abnormal text in human languages, hyphenation or other language-specific word division should be applied. For most code expressions, permissible break points should be indicated, if needed, e.g. with the <wbr> tag or with zero-width no-break spaces.
I am new to CSS. When I run the following code in IE it lines up the spans as expected, fixing there widths to 100px and padding the sides with as much space as necessary depending on the window size.
<table ID="tblRecordCount" style="width:100%">
<tr>
<td />
<td style="width:100px">
<span ID="lbl1" runat="server">Records1</span>
</td>
<td style="width:100px">
<span ID="lbl2" runat="server">Records2</span>
</td>
<td style="width:100px">
<span ID="lbl3" runat="server">Records3</span>
</td>
<td />
</tr>
</table>
When you run it in Chrome the browser either sets the first td width to 0px and fills in the last one, or sets the first and last to 0 and stretches the middle ones to fill the space.
Any CSS tricks to tell Chrome to behave? You can see this behavior in jsFiddle.
I have a basic table with four columns (let's call them A, B, C, D) and a specific desired width, 600px. The contents are all text. What I want is for the column widths to be allocated as follows:
Columns A-C are just wide enough to fit the text without any wrapping, no wider
Column D gets whatever width is left over, and cuts off any overflow instead of wrapping to a new line.
How can I accomplish this with CSS?
This is the closest I've gotten:
<table style="width: 600px; table-layout: fixed;">
<thead>
<th style="white-space: nowrap;">Column A</th>
<th style="white-space: nowrap;">Column B</th>
<th style="white-space: nowrap;">Column C</th>
<th>Column D</th>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;">12345</td>
<td style="white-space: nowrap;">Some Text</td>
<td style="white-space: nowrap;">Some More Text</td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Some very long text goes here. This text is going to get cut off. It won't all fit in this cell. I hope it doesn't wrap onto a second line. That would be bad.
</td>
</tr>
</tbody>
</table>
In this case the width for Columns A, B, and C has nothing to do with the content. It gives the cells too much space for short text and too little space for long text. It does, however, properly truncate Column D.
I also tried setting the widths of Columns A-C to 1% and Column D to 100%, but then they all run together at the left edge of the table.
Any ideas how I can get that width calculation?
Might you want some thing like this http://jsfiddle.net/2qHY3/3/ ..?
by removing
white-space: nowrap;text-overflow: ellipsis;
from the last <td>