I have a html table that has 2 cells in a row. How can I make the second cell appear below the first one instead of next to it? I can only do it in CSS and it's a dirty hack, but ... I still need it.
change the display to block
tr td{
display:block;
}
Add these to the cell style to make it work in IE:
float:left;
clear:both;
CSS:
table{
width: 100px;
}
.block{
border: 1px solid black;
display: block;
width: 100px
}
HTML:
<table>
<tr>
<td class="block">
First Cell
</td>
<td class="block">
Second Cell
</td>
</tr>
</table>
Try it: http://jsfiddle.net/LKFC5/1/
If possible you should try to edit the HTML instead of hacking it with CSS :)
With out affecting the whole table it's not possible.
You can set the display of the table cells to block:
#your-table-id, #your-table-id tr, #your-table-id td {
display: block;
}
You could try this with only the row you want, but those cell will most likely be renders after the rest of the table.
Edit: Actually it dies work with just a row: http://jsfiddle.net/JzkLZ/
Caveat: This won't work in IE6.
How your code look like?
I would rather use jQuery not CSS
Related
I am trying to pick a specific width for a td element. When i use style such asd
<style>
td.ex{
width:105px;
}
</style>
and then apply that to the td element like this
<td class="ex">
</td>
it doesnt do anything however if i do this
<style>
td{
width:105px;
}
</style>
it applies it to all td elements which is not what i want. Any help would be appreciated.
Targeting by classname works just fine.
td.ex{
width:105px;
border: 1px solid black;
}
<table>
<tr>
<td class="ex">asdf</td>
</tr>
</table>
I assume this is not possible. You can't change only one <td>'s width, while others have different size, since all cells in a column must have the same size (if your table has only one row, this is true). You didn't show your HTML code, so we don't know if this is the case.
However, you can change each <td>'s padding one-by-one to whatever you want. This can also reduce the cell's size, but the <td> element will actually fit the column's width - which is similar to what you want, I think.
I have the following html
<table>
<tr>
<td>
<div class="container">
<img src="http://.../baking-potato.jpg" />
</div>
</td>
</tr>
</table>
The td cell is not wrapping "perfectly" the div+img content: as you can see from this fiddle, there's a margin in the bottom of the cell, highlighted by the black background.
How can I get rid of that unwanted margin? I tried the following css properties
table{
border-spacing: 0 px;
border-collapse: collapse;
}
but nothing changed..
Thank you in advance
Add the following CSS
.container img { display:block; }
JSFiddle Updated
Reason:
This happens because an <img> is an inline element, and therefore leaves space for text characters like p and y for example, because it is inheriting the line-height
Not sure why this occours here. I have tried several things. The following CSS seems to work for me:
.container img {
margin-bottom: -5px;
}
However it's a hack and therefor not a really good practise in my opinion. But sometimes you just don't get around using hacks...
Not really related to this case, but for someone having issue with <pre> wrapperd in <td>, you may need to set margin: 0 to remove the space. This is the case I met with when using codeblock in hugo.
I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).
CSS file:
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
}
#all {
width: 500px;
}
#tablediv {
width: 400px;
float: left;
}
jsp file:
<body>
<h3>All your notes:</h3>
<c:if test="${!empty notes}"/>
<form method="post" action="manage_note">
<div id="all">
<div id="tablediv">
<table>
<tr>
<th class="widther">Note date</th>
<th>Description</th>
</tr>
<c:forEach items="${notes}" var="note">
<tr>
<td class="widther">${note.date} ${note.time}</td>
<td >${note.description}</td>
<td><input type="radio" name="chosen_note" value="${note.note_id}"></td>
</tr>
</c:forEach>
</table>
</div>
<div id="addbutton">
<input name="add_note" type="submit" value="Add note"/>
</div>
</div>
<div id="restbuttons">
<input name="edit_note" type="submit" value="Edit"/>
<input name="delete_note" type="submit" value="Delete"/>
</div>
</form>
</body>
And here is screen:
http://imageshack.us/photo/my-images/203/tableproblem.png/
You'll need to do two things to prevent the table from becoming too large.
1) Set the table-layout to fixed:
table {
table-layout: fixed;
width: 100%;
}
2) Set word-wrap to break-word for td/th
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
word-wrap: break-word;
}
You can see a working example here: http://jsfiddle.net/d6WL8/
I got a simple solution, hope it may help somebody someday.
Any table which is flowing out of its container, just encapsulate it with a div tag with style="overflow:auto"
<div style="overflow:auto">
<table>
.
.
.
</table>
</div>
The answer by hoooman is correct but maybe you mean something else. You can use overflow:auto on that table and also specify a width and it will create scroll bars if the content goes outside of the table.
There is also overflow-x and overflow-y to specify which axis.
If it is long strings of text, like a URL, you can use:
word-wrap: break-word;
this will break the text "wrapped" at the end of the column instead of like break-word which doesn't work out of the box without spaces (e.g long url's)
and add:
overflow-y:hidden;
this will prevent the overflowing text from overlapping the next row
That is because you have 1 word that is about 100 character long, try putting a space in the middle of that and it should fix itself.
set max-width along with word-wrap
Some times adding a Table inside a Div it happens.
In my case i had given padding-right:0px for the <div>
I was also facing this issue , added this class in css and fixed
table {
margin-left:0
}
This is an old question, but I have a simpler method.
Just add this:
th, td {
word-break: break-word; /*or you can use word-break:break-all*/
min-width: 50px; /*set min-width as needed*/
}
the min-width for th or td will not work if your table already set to table-layout:fixed. Just delete it.
or add this if you cannot find old css for table-layout
table {
table-layout:unset !important;
}
make sure you give an additional class / id before the table if you want the code to work only on the page you want.
Example:
.entry-content table {
table-layout: unset !important;
}
.entry-content th, .entry-content td {
word-break: break-word;
min-width: 50px;
}
Hope it can help all of you. Good luck!
Some of the cell values which are part of the table go out of the table.
After trying multiple options given above, reducing the table width to 90% solved the issue.
table {
border-collapse: collapse;
width: 90%;
}
I have a condition,
shown in this image:
It is only allow to use very simple HTML TABLE element to solve.
I wonder my this solution is it the best already?
http://jsbin.com/exazif/
to look the code: http://jsbin.com/exazif/edit#javascript,html
If you must use a <table>, this method is good. However you should not write colspan="250". Colspan is not designed for that. If you do not have to use a <table> you could use floated div's.
To be honest, there is a big debate about what is better: tables or divs. Read more about it here.
This is pretty good tutorial on basic tables.
You should give your td tags ids and then use css instead of the outdated html-attributes.
css
table {
border: none;
width: 800px;
border-collapse: collapse; /* instead of cellspacing */
}
td {
padding: 0;
}
td#first_first {
background-color: 'red';
width: 400px;
}
td#first_second {
background-color: 'blue';
width: 400px;
}
And in your html
<table>
<tr>
<td id="first_first">400x200</td>
<td id="first_second">400x200</td>
</tr>
...
</table>
Colspan means for how many columns a td cell extends. So in your code it's not used right. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.