My code is similar to as follows:
table,tr,td {
border-collapse:collapse;
border: 1px solid black;
}
label {
font-size: 0.7rem;
}
table {
table-layout: auto;
}
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
<tr>
<td>
<label>Foo bar</label>
</td>
</tr>
</tbody>
</table>
The issue occurs when the element on top is bigger than the element on the bottom. I know the solution seems obvious: use table-layout: auto; However, as you can see, that doesn't work.
There is no padding or margin, and the height is not set manually on either of them. My question is as follows: Why is the space there, and, more importantly, how can I remove it?
I feel really stupid now: it was just the line-height property. I set it lower and that fixed it.
Edit: A more simple solution suggested by VilleKoo is to set the display property of the <label> to block or flex (setting the padding to 0, which is mentioned in the comment, is not required)
Related
I want to remove the padding between the rows and between the two lines of text:
<br />
Please see the explanation below:
http://79.170.44.112/activate-enterprise.co.uk/wp-content/uploads/2014/09/meet-the-team-image.jpg
My table html can be seen at: http://jsfiddle.net/63nzsht1/
My webpage can be seen at:
http://79.170.44.112/activate-enterprise.co.uk/meet-the-team/
The text is in a separate row (both lines of text in the same cell).
Many thanks!
P.S. Tried
cellpadding="0" cellspacing="0"
But I'm still getting the spacing issue, think it must be being pulled from somewhere else?
There are multiple things causing a gap between the image and the text:
Because images are displayed inline, there is a reserved gap beneath inline elements to make way for letter descenders. Display your images as blocks or alter their vertical alignment to lost the gap.
Your table cells display their content in the middle, vertically, by default. So your text is vertically aligned in the middle, not the top. They also have a default padding, remove this.
Your table has border spacing by default, which can be removed with border-spacing:
img { display:block; }
table { border-spacing:0; }
td { vertical-align:top; padding:0; }
JSFiddle
Try cellpadding="0" cellspacing="0" properties at the table!
The cellpadding and cellspacing attributes are supported in all major browsers.
<table cellpadding="0" cellspacing="0" >
<tr>
<th>h1</th>
<th>h2</th>
</tr>
<tr>
<td>m</td>
<td>m</td>
</tr>
</table>
table {
line-height:0.8em;
}
td {
padding:0;
margin:0;
vertical-align:top;
}
img {
display:block;
}
http://jsfiddle.net/63nzsht1/9/
Try adding
padding: 0;
line-height: 12px;
to element td which has text in it (define class for that).
http://jsfiddle.net/63nzsht1/10/
You need to set the padding to 0px and set the line height to a specific number:
The distance between lines will change using line height.
th, td {
padding: 0px;
line-height: 10px;
}
<a href="/cilla/" style=" line-height: 1;">
<span style=" display: block; line-height: 1.7;">Managing Director</span>
<span style="display: block;"> Cilla McKay</span>
</a>
one of way to solve ur problem
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
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%;
}
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to
I'd like to create a table that looks like this:
lolvalue---------|lol date|some other column data 1
lolvalue12345|lol date 2|some other column data2
in CSS/HTML. Basically, there is "data" and there is a filler that goes to the right, but doesn't count as data, so it doesn't stretch the column, filling the space stretched by the max-length row.
It's like in those old content books where there were dots guiding us to the right page, remember?
How could I do that? There is no property like "padding-backgrond". I can probably create this by using layers for only one column but then, how do I determine the width of the layer?
Another approach would be to generate appropriate amount of characters within software, but hmm, that wouldn't be portable across fonts and browsers.
I use Ruby on Rails for server-side, if it makes a difference.
You could add a background-image to your td and wrap the inner text with an inline element such as a span and style that with a background-color:
<style type="text/css">
td { background:url(dot.gif) 0 0 repeat-x; }
td span { background-color:#fff; }
</style>
<table>
<tr>
<td><span>loltext</span></td>
<td>loldate</td>
</tr>
<tr>
<td><span>lolvalue12345</span></td>
<td>lol date</td>
</tr>
</table>
This way, you wouldn't need to assign a width.
A quick cheat I've used in the past is to flood all the fields with the trailing characters (like '------------------...') and then hide the overflow with with css.
<table>
<tr>
<td>lolvalue------------------------------------</td>
<td>lol date</td>
</tr>
<tr>
<td>lolvalue12345-------------------------------</td>
<td>lol date</td>
</tr>
</table>
And then style it with:
td { width:50px; overflow:hidden; }
css:
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; }
.words { background: none; }
markup:
<div class="extendo"><span class="words">lalala</span></div>
you may need to specify padding or alternate background