I have large URL(without spaces) in one of my Table(html table element) cell which resize table. I do not want to resize table, what property should I set to break URL into new line?
HTML
<table class="ui-grid" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>Statistic (Last 50 conversions)</caption>
<tbody><tr>
<th scope="col">Date</th>
<th scope="col">Result</th>
<th scope="col">Api</th>
<th scope="col">IP</th>
<th scope="col">Source</th>
</tr><tr>
<td style="width:200px;">12/16/2011 3:23:59 PM</td>
<td align="center" style="width:50px;">True</td>
<td align="center" style="width:100px;">Web2Pdf</td>
<td align="center" style="width:100px;">::1</td>
<td style="width:200px;">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.html?i_url=http%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-c&i_name=Patriots%20%20vs%20Redskins&i_venue_name=Gillette%20Stadium%20&i_venue_address=Foxborough%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
CSS
.ui-grid { width: 100%; margin: 5px 0 10px 0; border: solid 1px #eeeeee; border-collapse: collapse; }
.ui-grid td { padding: 2px; border: solid 1px #eeeeee; }
.ui-grid td b { font-weight: bold; }
.ui-grid th { padding: 4px 2px; color: #fff; background: #000000; border-left: solid 1px #eeeeee; text-align: center; }
.ui-grid .alt { background: #fcfcfc; }
.ui-grid .pgr { background: #424242; }
.ui-grid .pgr table { margin: 5px 0; }
.ui-grid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.ui-grid .pgr a { color: #666; text-decoration: none; }
.ui-grid .pgr a:hover { color: #000; text-decoration: none; }
Add the following to your css
table-layout:fixed
word-wrap:break-word
The following site has a good walk through of this
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
i modified your code a little and this is what works for me hopefully it will help you
<html>
<div id="wrap">
<div id="content-primary">
<table class="table" cellspacing="0" rules="all" border="1" id="MainContent_gvStatistic" style="border-collapse:collapse;">
<caption>
Statistic (Last 50 conversions)
</caption><tbody>
<tr>
<th scope="col">Date</th><th scope="col">Result</th><th scope="col">Api</th><th scope="col">IP</th><th scope="col">Source</th>
</tr>
<tr>
<td style="width:100px">12/16/2011 3:23:59 PM</td><td align="center" style="width:50px;">True</td>
<td style="width:100px">Web2Pdf</td>
<td style="width:100px">::1</td>
<td style="width:100px">http://a1.quickcatchlabs.com/phototemplates/football_blimp_1.htmli_url=ht%3A//lh3.ggpht.com/yf5lVBB_WNBvBHT1HoIzY1SG0-PY5zRCobP3vBacuSk9N346F7CeAIRSFOltR6ZC1-yf-MNKAcAd7bAZ_A%3Ds612-%20%2C%20MA&d_Score_0=34&d_Score_1=27&d_Period_0=Final&p_name_0=Patriots%20&p_name_1=Redskins</td>
</tr>
</tbody></table>
</div>
</div>
</html>
<style type="text/css" media="screen,print,projection">
#import '/css/lab.css';
#wrap {
width:60em;
margin:2em auto;
}
#content-primary {
float:left;
width:60%;
}
#content-secondary {
float:right;
width:36%;
}
table {
width:100%;
border:1px solid #f00;
word-wrap:break-word;
}
th,
td {
vertical-align:top;
text-align:left;
}
</style>
The most practical approach is to add the tag <wbr> after each acceptable break point, such as “/”, “?”, and “&” (maybe also “=”). This tag has been supported by browsers since the early days; it is not included in any HTML specification (though it is proposed to be standardized in HTML5), but it works practically always and has no know drawbacks.
Since this is about a URL in text, the breaks should appear at natural points of division, not arbitrarily. Various style guides (like The Chicago Manual of Style) have their own recommendations, but the simple break point rules mentioned above should be acceptable on all accounts and normally suffice.
There’s some more info on my page on word division in HTML and related matters.
You can try several things:
add the CSS3 property word-wrap: break-word;
You can put a div inside your table cells. Nothing within that div will stretch out the table cell.
max-width css property
Surround the URL in a containing div inside the td. Apply word-wrap:break-word; width:200px to the div container. The div container is for the benefit of IE. In Chrome, for instance, the styles can be applied directly to the td.
word-wrap is non-standard, however, it has excellent browser support, including IE6+.
Here is an example fiddle.
Related
I am working on my website and I have most of the design worked out, shown in the first image. I am trying to make the header row have no space (more accurately, make it look that way by having the image span across the entire row with no spaces.), but still have the elements themselves have space in between them.
Image showing a joined header, but separate body elements:
I am aware of the border-spacing css style, but it has to be applied to the table element, which means it will apply to headers and body elements. This with with a border-spacing set
Image showing what happens to the images when the border-spacing is set on the table:
I did attempt to find an answer before posting and usually I find the answer fairly quickly, but this one seems to be a rare request. I prefer to avoid hacks if possible, but I will use them if its the only way. Also, if possible, I'd like it to be cross-browser capable. (changes to the solution are ok of course, just something that I can make work will all of them.)
I guess code is helpful to show. Here is the html:
<table id="users">
<caption>Point Totals</caption>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xogue</td>
<td>64433</td>
</tr>
<tr>
<td>Jesse</td>
<td>104040</td>
</tr>
<tr>
<td>Nanokarp</td>
<td>280</td>
</tr>
<tr>
<td>Brandon</td>
<td>70</td>
</tr>
</tbody>
</body>
and the css:
#users {
border-spacing: 6px;
width: 444px;
float: left;
margin: 20px 90px;
}
#users caption {
background-image: url("_images/points_label.png");
background-size: 200px 35px;
background-position: center center;
background-repeat: no-repeat;
height: 31px;
font-size: 20px;
padding-top: 8px;
}
#users thead {
background-image: url("_images/point_tr_head_back.png");
background-repeat: no-repeat;
}
#users th {
text-align: left;
padding: 9px 30px;
font-size: 20px;
}
#users td {
border: 2px solid #226fdb;
border-radius: 25px;
font-size: 20px;
padding: 18px 5px 2px 25px;
line-height: 15px;
background: #FFFFFFEE;
}
Note: Some of the styles used are likely unnecessary. I've been toying with it for a while and haven't cleaned it up yet.
SOLVED: further down if you would like to see the example. but put simply, wrap the content in a different element (like a span) and move all styles to the new element.
I think you could get there fairly easily with some margins and padding if you can wrap the cell contents in a span (or whatever).
table {
text-align: left;
border-spacing: 0;
}
thead tr {
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
border-radius: 24px;
}
th {
padding: 6px 1em;
}
th:first-child {
border-radius: 24px 0 0 24px;
}
th:last-child {
border-radius: 0 24px 24px 0;
}
tbody td > span {
display: block;
border: 2px solid blue;
background: aliceblue;
border-radius: 24px;
margin: 6px 6px 0 0;
padding: 0.25em 1em;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td><span>Xogue</span></td>
<td><span>262677</span></td>
</tr>
<tr>
<td><span>Jesse</span></td>
<td><span>17632</span></td>
</tr>
<tr>
<td><span>Nanokarp</span></td>
<td><span>12344</span></td>
</tr>
</tbody>
</table>
One option is to add padding to your CSS for td only and keep rest of the attributes same among td and th as below, also if you can share the used code snippet someone can help better:
td {
padding: 5px;
}
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
I have a table and I want horizontal borders on the rows, this works fine in real browsers but in IE it just doesn't show, here is my CSS and an image of what is happening. How can I fix this?
Screenshot
CSS
.defaultTableStyle {
border-collapse: collapse;
text-align: left;
font-size: 12px;
width: 100%;
}
.defaultTableStyle th {
background: #eee;
}
.defaultTableStyle th, .defaultTableStyle td {
border-top: 1px solid #ccc;
padding: 6px 8px;
position: relative;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
HTML
<table class="defaultTableStyle" id="resultsTable">
<tr>
<th></th>
<th>Date</th>
<th>Success Rate</th>
<th>Coverage</th>
<th>Duration</th>
</tr>
<tr style="" data-result-id="3362" data-successrate="100" data-coverage="2" class="resultDataContainer">
<td><span class=""><i class="icon-ok"></i></span></td>
<td>27/02/2014 09:16:29</td>
<td>100%</td>
<td>2%</td>
<td>1 sec</td>
</tr>
<tr style="" data-result-id="3361" data-successrate="100" data-coverage="2" class="resultDataContainer">
<td><span class=""><i class="icon-ok"></i></span></td>
<td>27/02/2014 09:15:28</td>
<td>100%</td>
<td>2%</td>
<td>1 sec</td>
</tr>
Should work with adding border-bottom as well with the existing css
.defaultTableStyle th, .defaultTableStyle td {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 6px 8px;
position: relative;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
I suggest removing position:relative, in part because it doesn't do anything for a cell and in part from pure IE-fear (it does weird things with positioning).
In addition to that, try Binita's answer. Instead of two shorthand declarations, though, try:
border: 1px solid #ccc;
border-width: 1px 0;
So here you go add border-bottom:1px solid #ccc; to the TD jsfiddle.net/HarishBoke/3fRub
For me this worked:
<table cellspacing="0" and cellpadding="0"> ... </table>
From here.
Check if your IE Zoom is set to 100%. Spent time searching for a solution when I noticed that I am working on 80% zoom.
Only now as I type this answer I found the comment above pointing to this issue.
So I have this code here:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
with the CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
It should be:
<td width="200">
or
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.
EDIT
As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
This problem is quite easily solved using min-width and max-width within a css rule.
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
This will force the first column to be 80px wide. Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty. The OP's question was about setting to a fixed width though, hence both rules together. On many browsers width:80px; in CSS is ignored for table columns. Setting the width within the HTML does work, but is not the way you should do things.
I would recommend using min and max width rules, and not set them the same but rather set a range. This way the table can do it's thing, but you can give it some hints on what to do with overly long content.
If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text, I use white-space: nowrap; on the main rule, then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it.
Something like this:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
It just depends on exactly what you are trying to achieve. I hope this helps someone.
PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome
You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
You can try the "table-layout: fixed;" to your table
table-layout: fixed;
width: 150px;
150px or your desired width.
Reference:
https://css-tricks.com/fixing-tables-long-strings/
You can use within <td> tag css : display:inline-block
Like: <td style="display:inline-block">
try this:
word-break: break-all;
try to use
word-wrap: break-word;
hope this help
I use
<td nowrap="nowrap">
to prevent wrap
Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
Note that adjusting the width of a column in the thead will affect the whole table
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe#email.com</td>
</tr>
</table>
In my case, the width on the thead > tr was overriding the width on table > tr > td directly.
I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property
This was my HTML requirement
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
My CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.
Use
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column)
to specify length to each cell
I'm getting crazy with getting my table look right on different browsers, just when I think I got in one it changes in the other. IE7/8 and Firefox are my target browsers.
Could someone please have a look at the code I just can't figure out what's the problem.
Table is generated by Javascript, I need it have fixed width of 220px, the main problem is tfoot where I have 3 tds for which I'm having problems controlling width.
Here is the relevant portion of the code:
<table class="favouritelinks" cellspacing="0" cellpadding="0" width="220" >
<thead>
<tr><td colspan="3">Your Favourite Links</td></tr>
</thead>
<tbody id="tulemused" ></tbody>
<tr>
<td width="50">Name</td><td><input type="text" id="key" name="key" value="" /></td>
<td rowspan="2"><div class="addimg"></div></td>
</tr>
<tr>
<td width="50">URL</td><td><input type="text" id="val" name="val" value="" /></td>
</tr>
</table>
and css:
.favouritelinks td{
height: 20px;
padding: 3px;
border-bottom: 1px solid white;
word-break: break-all;
}
.favouritelinks td a{
color: white;
text-decoration: none;
}
thead{
background: url(img/title5.png) no-repeat;
color: #444;
font: bold 16px Helvetica;
text-shadow: 0 1px 0 #FFF;
text-align: center;
width: 220px;
height: 36px;
}
thead tr {
height: 36px;
}
.container{
width: 220px;
margin-top: 105px;
margin-left: 10px;
}
.delimg {
background: url(img/details_close.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.addimg {
background: url(img/details_open.png) no-repeat;
width: 20px;
height: 20px;
float: right;
}
.urls {
display: none;
}
What am I doing wrong?
Picture http://imageshack.us/photo/my-images/38/56751263.jpg/
Try this in your CSS:
table {
table-layout: fixed;
}
Remove the padding:3px from .favouritelinks td in CSS and all will be OK.
OR BETTER WAY
set td width in CSS not in HTML
I had the same problem with layout good in IE9+, but bad in IE 7/8. I found out "colspan" was the problem when this column is wider then the sum of other matching columns not colspan on other rows. I was specifiying fixed width on all columns except the one I want to be adjusted with the remaining width. But that didn't work on IE 7/8. So I end up splitting rows on different "table" to workaround that layout problem.