I have a table
<table cellpadding="0" cellspacing="0">
<tr>
<td>dfa sdfs fsafsdfasdfs dfsdf dsf</td><td>sdfds fdasfsffsdfsdfsdffsfd</td>
</tr>
<tr>
<td>dfas dfs</td><td>sdfdsf dasfs ffsd fsdfsdfsfd</td>
</tr>
<tr>
<td>dfasdfsdffsdfdfasdfsd fsdf dsf</td><td>ssdffsfd</td>
</tr>
</table>
and I need the long columns to not stretch out the table but to word wrap.
how can i do this
I ultimately need each column to have a width of 50px.
You want to do this in CSS, so like this.
table td{
width:50px;
}
td{
word-wrap: break-word;
}
this should work for you
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>
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 going off my rocker with IE/CSS problems! I've tried everything (I think) is imaginable to center the text of a table cell. I started with the old, archaic method:
<tr>
<th width="100" align="center" class="centerme">Some text here.</th>
</tr>
Then, I tried CSS:
.centerme {text-align:center;margin:0 auto;}
Then I tried putting the style inline (keeping ALL the other methods already mentioned):
<tr>
<th width="100" align="center" class="centerme" style="text-align:center;">Some text here.</th>
</tr>
What could I possibly be missing? I tried center aligning the <tr> element, which shouldn't make a difference, but then IE is a nightmare to get along with! Note this is only a problem in IE. It is fine in every other browser (and this is IE 8)
Removing the width="100" resolved the issue.
Try this:
td
{
height: 50px; (or whatever value you want)
width:50px;
}
#cssTable td
{
text-align:center;
vertical-align:middle;
}
Try this code. I was able to get it to work.
The margin centers the table on the screen. So delete it if you do not want it to be centered.
Change the width to whatever you desire. Right now it is 100% for the whole width of the screen.
HTML:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS:
table, th, td
{
border: none;
margin:0px auto;
text-align:center;
}
table{
width:50%;
}
I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.
there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.
when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.
jsfiddle
<table>
<tr>
<th colspan="3">title text</th>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
<td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
</table>
table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}
table td{
padding:2px 5px;
}
table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}
table tr:hover td
{
background-color: #ebf1f6;
}
I had a similar requirement: apply a background color on a table row, as I hovered over the row with the mouse pointer, except on a 'selected' row, that was already highlighted in a different background color.
Using 'pointer-events: none;' achieved exactly what i wanted: JsFiddle
table#CustOrders tbody tr:hover td {
background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
background-color: Yellow;
pointer-events: none;
}
The first thing that came to my mind is using "pointer-events" css property. But I am not sure if it is useful here. Check this link (there is a jsFiddle example available)
Also think about using some javascript code to set the logic you need. I understand that you want to use css only, but js fix can be quite small and obvious here - so why not ?
you can check Answer
HTML
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2" scope="row">title text </td>
</tr>
<tr>
<td width="75%" scope="row">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
</table>
</td>
<td width="25%">Purchace</td>
</tr>
</table>
CSS
.amount_table tr:hover{
background:gray
}
Given HTML like the following, how can I get the last row to take up the remaining height, and have the n-1 first rows to take up just as much height as they need?
This seems to work as is in Chrome, but not in Firefox2 or IE6/7/8.
<table>
<tr>
<td rowspan="5"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td/>
</tr>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td>full</td>
</tr>
</table>
So, the idea is that the last row, with "full" in it, should be really tall, and the other rows, "one", "two" and "three" should be as small as possible.
I've tried stuff like putting exact heights on the rows, say "<tr style="height:20px;"> and I've tried 100% height on the last row, no luck so far!
Update:
This layout is going to be used for varying types of content, and the intention is for the table to size itself to the content. Sometimes the div will be tall, then its height determines the table's height, but othertimes the div is short, then the rows (one, two, three) determine the table's height.
If javascript is ok, you could use jQuery and find the top position of the last row and the position of the bottom of the window or element. The difference should be set as the height of the last row.
I didn't do any code yet, because I wasn't sure if you were looking for a table inside of an object or to have it fill to the bottom of the window. I can do that for you if you'd like with some more detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><body>
<table border=1>
<tr>
<td rowspan="2"><div style="border: 1px solid #cdcdcd; width: 100px; height: 300px;"/></td>
<td valign=top style="padding:0px;">
<table height=1>
<tr>
<td>one</td>
</tr>
<tr>
<td>two</td>
</tr>
<tr>
<td>three</td>
</tr>
<tr>
<td valign=top>full<br><br><br>more full</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>
Updatedx3, works in ie6/ff