I know my question is related to this one, but my situation is slightly different and also there is no solution in the other question.
So, I have the following markup:
<table>
<tr>
<td>
<div>I respect max-width</div>
</td>
<td>
<input value="I do not" />
</td>
</tr>
</table>
With the following styles:
table {
width: 200px;
background: #f7f7f7;
}
td {
width: 50%;
background: #e7e7e7;
}
div, input {
display: block;
width: auto;
max-width: 100%;
background: red;
}
This would be the expected result:
But, this is the actual one:
Somehow the auto width of the input field determined by the browser is larger than 50% (100px). That's all fine and dandy, but why isn't it respecting the max-width: 100%?
If I force set width: 100% it works as expected (second image), however that's not what I want. I want it to be as wide as the browser decides is good, just not wider than 100%.
Any ideas?
Here's the fiddle.
That could help you: Fiddle
td {
box-sizing: border-box;
display: inline-block;
width: 50%;
background: #e7e7e7;
}
If you set the table to table-layout: fixed you get the result you want:
table {
width: 200px;
background: #f7f7f7;
table-layout: fixed;
}
input {
display: block;
max-width: 100%;
background: red;
box-sizing: border-box;
}
Related
this fixed-header table deforms column when resizing window horizontally. Is there way to stop that?
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
table th {
border-left: 1px solid blue;
}
table th,
table td {
padding: 5px;
text-align: left;
border-left:1px solid blue;
}
table th, table td {
width: 150px;
}
table thead tr {
display: block;
position: relative;
}
table tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>pick_up_location</th>
<th>destination</th>
<th>instruction</th>
<th>created_at</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12322</td>
<td>Whanga Road</td>
<td>Crescent Street</td>
<td>Call when arrive</td>
<td>123442342331</td>
<td>comming</td>
</tr>
</tbody>
</table>
</body>
</html>
Keep in mind this fixed-header table. Mean when you have 100 rows. you can scroll the row but the header position is fixed. The display block attributes can not be removed.
UPDATE:
With Mark answer, the table looks fine but still deform at small screen. A screenshot of it
To don't have problems with resizing you have to work in height and width with %.
Like : width: 30%;
height: 40%;
Hope help you.
Do not apply an explicit width or height to tag. Instead, give it:
max-width:100%;
max-height:100%;
just modify the last two ccs declarations as follows:
table{
display: block;
position: relative;
}
table tbody {
position : relative;
overflow: auto;
width: 100%;
height: 300px;
}
Adding word-break: break-all; to all the cells makes your code work (almost, since all characters are not of the same width)
See https://jsfiddle.net/3wn1zzfn/
Your problem is that when it is not possible to fit all cells in a table, the width: 150px; is overridden, and widths are now based on length of the line.
The problem here is that you are applying display: block, you shouldn't use it on tables. Also remove px values on tables. use %, or remove it at all
Remove these lines of code:
table th,
table td {
/*width: 150px*/
}
table thead tr {
/*display: block;
position: relative;*/
}
table tbody {
/*display: block;*/
overflow: auto;
width: 100%;
height: 300px;
}
Here a codepen to show it:
http://codepen.io/sandrina-p/pen/qNYork?editors=1100
--EDIT--
before -1 please can you tell me what's wrong with my solution, to improve it?
See http://jsbin.com/sawofo/2/edit. I am trying to fill a table cell with an input, using bootstrap's css, but I am left with a gap that I can't get rid of.
My html snippet is:
<table class="table table-bordered">
<tbody>
<tr>
<td class="with-input"><input class="form-control tall" type="text" value="text"></td>
<td class="tall">XX</td>
</tr>
</tbody>
</table>
And the CSS which allows the input to stretch is:
td {
padding: 0px !important;
}
td.tall {
height: 100px;
}
input.tall {
margin: 0;
height: 100% !important;
display: inline-block;
width: 100%;
}
But there is still a gap at the bottom of the input that I can't get rid of. It appears to have something to do with bootstrap setting
* {
box-sizing: border-box;
}
but I can't figure out how to reverse the effect without completely removing bootstrap. If I set the td to use content-box, the height is fine but it overflows horizontally into the next cell.
add padding: 0;
td {
padding: 0px !important;
}
td.tall {
height: 100px;
padding: 0;
}
input.tall {
margin: 0;
height: 100%;
display: inline-block;
width: 100%;
padding: 0;//added
}
output
http://jsbin.com/kefibozapo/1/
I found the solution. It seems that for some reason the padding leaks from the child element to the td, so setting padding: 10px on the input also assigns it to the td. The solution is to wrap the input in a div with style:
padding: 0;
display: inline-block;
height: 100%;
width: 100%;
E.g.: http://jsbin.com/sawofo/4/edit
What I am trying to do is create a page that has a table with 2 columns. The column on the left has a number of data displayed (this part works fine) and the column on the right will have div that displays 2 images side by side (this also works). The problem is that the images in the right div will not expand to fill the full height of the left table column. If I look at things in the debugger I can see that my left table column is (for example) 440px in height. However, the right div is always 300px in height. Since my img is 45x300px I guess the div is somehow inheriting from this. I have been using CSS for a while now but would not consider myself an expert so I really think there is something regarding how the height is being inherited that I am missing. The html for this looks something like the following:
<div>
<table>
<tr>
<td class="left-outer">
<!-- left side content goes here -->
<p>Test 1....</p>
...
</td>
<td class="right-outer">
<div class="right-outer-2images">
<div class="right-outer-2images-img1">
<img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/fish.png" alt="Report Image Bar" />
</div>
<div class="right-outer-2images-img2">
<img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/czoch.png" alt="Report Image Bar" />
</div>
</div>
</td>
</tr>
</table>
</div>
CSS:
.left-outer {
border-style: solid;
border-color: green;
width: 20%;
}
.right-outer {
border-style: solid;
border-color: red;
width: 80%;
/*display: inline-flex;
justify-content: flex-start;*/
height: 100%;
}
.right-outer-2images {
float: left;
height: 635px; /* This works but is not ideal */
/*height: 100%;*/ /* This does not work but I believe should */
width: 98%;
border-style: solid;
border-color: blue;
/*vertical-align: text-top;*/
}
.right-outer-2images-img1 {
float: left;
width: 30%;
height:100%;
/*border-style: solid;*/
border-color: orange;
}
.right-outer-2images-img2 {
float: left;
width: 70%;
height: 100%;
/*border-style: solid;*/
border-color: yellow;
}
.right-outer-2images-img1 img,
.right-outer-2images-img2 img {
float: left;
width: 100%;
height: 100%;
}
So the height of left-outer (table column) contents will always be larger than the images and I would like the images to be stretched to be the same height and displayed in the right-outer table column. With the CSS example above if I explicitly set the height of the right-outer-2images div to the actual height then everything seems to work but if I set the height to 100% (or inherit) it does not work. I have put together a sample in jsFiddle (http://jsfiddle.net/a98w683u/) please have a look and let me know what I am doing wrong.
Your code doesn't work because a height is never defined for your table cell or your table. Therefore your height:100% declarations do not know what to be 100% of. If you set a height on the .right-outer declaration it will work:
DEMO EXAMPLE
Changes to these 3 declarations are needed:
.right-outer {
border-style: solid;
border-color: red;
width: 80%;
height: 100px; /* this is more of a starting height as the left column will stretch it */
}
.right-outer-2images {
float: left;
height: 100%; /* don't forget to change this back to 100% */
width: 98%;
border-style: solid;
border-color: blue;
}
.right-outer-2images-img1 {
height:100%; /* Updated; add this back in */
float: left;
width: 30%;
border-color: orange;
}
I have a table hosted in a div. Neither the table nor the hosting div has a height specified.
After the table header row, each subsequent row looks like this:
<tr class="movie-info-row">
<td>
<div class="movie-cover">
<img class="movie-image" src="" />
<a class="movie-link" href="" target="_blank">IMDb</a>
</div>
</td>
<td colspan=5>
<div class="movie-details">
<p class="movie-file"></p>
<div class="movie-div-left">
<p class="movie-category"></p>
<p class="movie-director"></p>
<p class="movie-insertdate"></p>
</div>
<div class="movie-description-container">
<p class="movie-description"></p>
</div>
</div>
</td>
</tr>
I want each table row (except for the header) to have the same fixed height but I just can't get it to work after hours of trying all kinds of approaches (and of course searching on stackoverflow and elsewhere).
My css (in less syntax) looks like this:
.movie-info-row {
height: 240px;
p {
margin-top: 2px;
margin-bottom: 2px;
}
td {
height: 100%;
overflow: hidden;
}
}
.movie-cover {
border: 1px solid black;
width: 130px;
height: 100%;
overflow: hidden;
}
.movie-details {
border: 1px solid black;
height: 100%;
overflow: hidden;
}
.movie-file {
font-size:larger;
}
.movie-div-left {
float: left;
width: 40%;
vertical-align: top;
display: inline-block;
}
.movie-description-container {
display: inline-block;
float: right;
width: 60%;
overflow: hidden;
vertical-align: top;
}
.movie-description {
overflow: hidden;
}
As you can see I have fixed the height of the row to 240px and for good measure have each td height set to 100% with overflow hidden.
The trouble maker is the description text, which can be quite long and it messes with the table row height. As you can see I have set overflow to hidden in many places (which is probably overkill).
Note: This is not browser specific. I am not even using IE. I am testing it with firefox and chrome (both latest versions).
I am really at a loss. What am I doing wrong? Any help would be greatly appreciated.
ETA:
Here's a picture of a table row as it looks now: SampleRow
As you can see the description text takes the row height with it. I want it limited to a fixed height - basically the hight of the title image. And yes, I want all the information (with more to come) in there. So that is non-negotiable.
Too many hiddens and floats and whatnot. Simplify and conquer. Also you have nested selectors inside of another selector (p{} and td{})
Demo Fiddle
CSS:
.movie-info-row {
height: 240px;
}
p {
margin-top: 2px;
margin-bottom: 2px;
}
td {
border: 1px solid black;
height: 100%;
}
div, p {
display: table-cell;
}
.movie-cover {
width: 130px;
overflow: hidden;
}
.movie-details {
height: 100%;
width: 100%;
}
.movie-file {
font-size:larger;
}
.movie-div-left {
width: 35%;
vertical-align: top;
display: inline-block;
}
.movie-description-container {
display: inline-block;
width: 55%;
vertical-align: top;
}
.movie-description {
overflow: hidden;
}
By the looks of your HTML all of your data will go into one table cell is this how you want it?
Why not structure it like using individual tags for the headers with a colspan of what ever and then do a new for each row you need along with its data like this?
<tr>
<th colspan=2>Header</th>
</tr>
<tr>
<td>cell 1 data</td>
<td>cell 2 data</td>
<tr>
Then you can do this in the css, which would give you this same fixed height for all the rows:
tr {
height: 240px;
}
That way you can just use the table headers to describe each column and use a lot less code to make it work properly. Or from what I understand you are trying to do.
This should be simple. I am trying to get a grey bar in a <td> of a table to expand to the full height of the rest of the <tr>. The problem is that the rows and cells are not fixed height.
I'm a believer in table-free layouts, so no need to convert me. I am stuck with a table in this case, so I need to work with it and treat it nicely.
Here's the HTML:
<table>
<tr><td>
<div class="bar"></div>
</td>
<td>
please<br/>
help<br/>
me<br/>
stack<br/>
overflow<br/>
</td>
</tr>
</table>
And the CSS:
td {
border: 1px solid black;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
}
Here's a fiddle: http://jsfiddle.net/DKQVG/4/
Try to add the following css style:
html, body
{
height: 100%;
}
AND
td, table
{
border: 1px solid black;
height: 100%;
}
Working version with just CSS changes: http://jsfiddle.net/wLtCd/1/
Basically, your TD should have a height defined, so a percentage height makes sense for its child nodes.
Secondly, your div needs to have a display property of 'table'
Full CSS:
td {
width: 100px;
border: 1px solid black;
height: 100%;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
display: table;
}
You can remove the width part from above.
Is this what you want?: http://jsfiddle.net/ymu4y/2/
I added the class bar to the <td> instead of the <div>.
I'm not sure if you can accomplish that using just CSS, but I'm not that familiar with CSS so I would just use JQuery instead, always works best for me when I have dynamic sizings.
<script type="text/javascript">
$(document).ready(function () {
$(".bar").height($(".bar").parent().height());
});
</script>
I tested this and it works fine, but if you're looking for a CSS only solution I don't know anymore. Hope that helps!