Our build software has a web interface that reports build status using a table. When a build is pending, it outputs the last log message in an inner table. These log messages can be very, very long.
This is a distilled version of the HTML emitted:
<html>
<head>
</head>
<body>
<table id="StatusGrid" class="SortableGrid">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr class="buildstatus">
<td colspan="11">
<table>
<tr>
<td>hello</td>
<td>...........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
If you display this HTML in your browser, you have to vertically scroll to see the entire contents of the table. I don't want this. I never want the table to extend outside the vertical width of the browser window. I don't mind truncating/clipping the extra-long text in the inner table.
I tried word-break: break-all, but that only works in Chrome. I have to support IE 9 and the latest versions of Chrome and Firefox.
The final wrinkle: I have to use CSS to fix this. I only have access to the application's stylesheet, and not the HTML.
What do you think? Possible?
Try putting a fixed height on the td and set its overflow or overflow-y to hidden;
tr.buildstatus td{
height: 500px;
width: 600px;
overflow:hidden; /* or overflow-y:hidden; */
}
This should work for you. You may have to adjust height/width to your taste.
tr.buildstatus tr td + td {
height:100px;
width:200px;
overflow:hidden;
}
table {
table-layout:fixed;
width:600px;
height:200px;
}
Live example: http://jsfiddle.net/R8nmk/
Try overflow: hidden.
The overflow is clipped, and the rest of the content will be invisible.
More about overflow here.
Related
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'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.
I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.
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>