This seems like a simple problem, but I can't seem to work it out.
I have a Datatables table, and one of the elements contains a free-form text field. When displayed in the table, I want this to only display the first line of this text field, rather than all of it.
I've created a jsfiddle here: JSFiddle
And an example picture showing what I'm trying to achieve: Example image
I've tried to set the height of the <td> as below, but this doesn't work.
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
It works for expanding the cells larger (eg: 80px), but not smaller...
I also tried this: JQuery Datatables row height but no joy.
Any help would be greatly appreciated.
It works when you put a block element inside your td, for example a div. See the updated fiddle for the working code. If you only want to limit bigger cells you should then use max-height in your CSS.
<tr>
<td>Brazil</td>
<td>
<div>
500
<br>500
<br>500
<br>
</div>
</td>
<td>200</td>
</tr>
Related
So I have a table with a navigation bar to scroll through the records. I changed the table-layout property to fixed so the columns wouldn't move when scrolling through the navigation. To do so, I had to apply the following CSS code:
table.fixed {
table-layout:fixed;
}
table.fixed td {
overflow: hidden;
}
The problem is that one of the columns of the table (the third one in this case) isn't able to fit the whole text in one line breaking it in two lines. How can I change the width of the column in order to accommodate longer text into one line?
Try
<td nowrap>
</td>
If you are using HTML 5 then
<td style="white-space:nowrap">
</td>
I know there are a lot of questions about that, but none of their solutions worked for me.
I have an html page formed by only a table (that I want print), I want the table to perfectly fit inside an horizontal a4 sheet.
This is my table without text (is a match referee):
(source: i.ibb.co)
The problem is that when I add some text the height changes.
I tried adding div inside td with an height, but this doesn't work well...
Also I would like to know how to print the page horizontally, cause my table overflow the printing area...
This is an example of my table:
<table>
<tr>
<td>
<div>BLABLABLA</div>
</td>
</tr>
...
...
...
</table>
I would suggest to use table-layout: fixed to manage size of your table and cells. Then as shown in example below manage overflows.
Which gives you stretched table, which wont adapt height to content.
.myTable {
table-layout: fixed;
width: 100%;
height: 100%;
}
.myTable tr td div{
overflow: hidden;
border: 1px solid #333;
height: 20px;
}
.myTable tr.higher td div {
height: 40px;
}
<table class="myTable">
<tr>
<td><div>A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
</tr>
<tr class="higher">
<td><div>A lot of text to display. A lot of text to display. A lot of text to display.</div></td>
<td><div>A lot of text to display. A lot of text to display.</div></td>
</tr>
</table>
You can insert it into #media print and adjust properly to your table.
References:
Media Queries
Position Fixed
I've been working with a html page that has a form in the bottom of the page. That form is inside a table and table is inside a div. Fiddle here : http://jsfiddle.net/2ZTvQ/
Problem is on smaller screen the div is taking 100% width(full width of the screen) but not width of the whole table containing the form. I'm not an expert with html/css so I'm not even sure if it can be done this way.
Sample HTML:
<div class='wide'>
<table width="100%">
<tr>
<td>
looooooooooooooo ooooooooooo00000 ooooooong text goes here
</td>
</tr>
</table>
</div>
CSS:
.wide {
text-align:center;
background:#e7e7e4;
width: 100%;
padding-top:20px;
}
Remove text-align:center; or create a new aligning style for the table.
What I think you will have to do is add a min-width to .wide of however small the table will get after manually trying to reduce it's width. So once it is as small as you can get it (use media queries to change classes under a certain window width) set
.wide { min-width: thatSize; }
What will happen now is instead of the content disappearing or running out of the div, you will now just have to scroll horizontally to see it all.
Or what you can do is add
.wide { overflow: scroll; }
What that will do is keep the viewport the same size, but make the content inside .wide scrollable like an iframe. Probably better looking than the first solution. Whatever you decide is a design choice on your part. But most important thing would be using media queries and trying to get the form as thin as possible. Display block and percentage widths are your friends there.
So I have 2 td side by side in a table. The first td has a border, the second doesn't but the element inside has one and I need both border to line up (top and bottom)
So is there a way to have the element go "over" the border space since it's not there? If I try to grow the element inside the td, the td grows and keep a 1px border spacing even if it's not there.
Rough html:
<table><tr>
<td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
</tr></table>
See this fiddle for a better picture :)
http://jsfiddle.net/LcGks/1/
Any idea?
I think what you want to do will make the content height of td different for first and second td. In table all element in a row have same height so i think you should not use table for this.
Otherwise the workaround i can think for this is to apply top and bottom border for td.noborder which will make both td's line up.
like this
td.noborder {
border: solid blue;
border-width: 1px 0px;
padding: 0px;
}
see here http://jsfiddle.net/LcGks/1/
Since you can't use box-sizing on table elements, I don't really see an easy way out. I think the best way would be to use a div inside the table cell to display the border.
http://css-tricks.com/box-sizing/
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I usually do this using the cellspacing attribute of the table.
<table cellspacing="2px" border="1px">
<tr>
<td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
</tr>
</table>
see example: here and see Code
I have a table in my html that I would like to center on my page. I have the following code. I is perfectly find in ie but not in chrome. Am I doing something wrong?
<table align="center">
<tr>
<td>
<div class="zoom_controls"> </div>
</td>
</tr>
</table>
The align="center" syntax was deprecated a long time ago. Add margin:0 auto to your table:
table {
margin:0 auto;
}
jsFiddle example (border added for visibility)
Give the table a fixed width, if possible.
Give the table a top- and bottom-margin of 0 (or other if you want to) and a left- and right-margin of auto.
This works with every kind of element with a known width.
You can also use a variable width (em / %).
EDIT: seems like other were typing the same solution as me.
For me what worked is:
margin: auto;
display: inline-block;
Tables