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
Related
I got a div serving as a header and below it a table that acts as a post, with a title, body and one cell and/or colums that hass arrows and a counter for upvotes and downvotes.
First problem I have is alignment and second resizing colums
Here is my code
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table {
table-layout: fixed;
margin: 0 auto;
width: 50%;
}
#votes {
text-align: center;
}
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
}
<div>RANDOM THINGS</div>
<table>
<tr>
<th id="title">Title</th>
<th id="votes" rowspan="3">
<img src='images/arrow_up.png' onclick='Upvote()'/>
<br>0<br>
<img src='images/arrow_down.png' onclick='Downvote()'/>
</th>
</tr>
<tr id="textBody">
<td rowspan="2">Text Body</td>
</tr>
<tr>
</tr>
</table>
What I got so far
You need to add box-sizing: border-box; to the div so it doesn't expand it's width in order to add the padding.
If using border-box the width and height properties (and min/max properties) includes content, padding and border.
Your css would end up as:
div {
font-size: 25px;
margin: auto;
color: white;
background-color: black;
padding: 15px;
width: 50% ;
border-radius: 12px;
box-sizing: border-box;
}
The rest of it unchanged. Here you have a CodePen showcasing it: https://codepen.io/javierojeda/pen/LqpLVN
However, as #hungerstar mention... You wouldn't use a table for that kind of things. You may want to use the new display: grid, display: flex or even use 3 divs and some CSS to accommodate them as you need.
For more info:
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
https://www.w3schools.com/css/css_grid.asp
https://www.w3schools.com/css/css3_flexbox.asp
I often use this HTML/CSS structure to create a mobile-friendly table (It changes layout on narrow (mobile) screens; something very lacking in CSS frameworks) and it has been quite reliable for me. In my main project I have several tables with lots of data and varying widths.
If you open this codepen and change the view to 'debug' you can shrink the page width. Past 500px the table layout will change. The thead is hidden, secondary labels are shown and the tds are set to display: flex. (I like to use the responsive device toolbar in the inspector).
Under the table is a more simple set of divs, that behaves the way I want the divs inside the TD to work, but for some reason, the second div inside the td stops shrinking at a certain point. I have tried different combinations of word-wrap and white space but so far no luck. Seems the difference has to do with these divs being inside a table...
Is this just a limitation of tables or is there a way I can make the right div shrink like the second example?
Thanks!
https://codepen.io/sinrise/pen/qoypYJ
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>number</th>
<th>content</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="td-label">number</div>
<div>this is the first one</div>
</td>
<td>
<div class="td-label">number</div>
<div>this is the second one</div>
</td>
</tr>
</tbody>
</table>
<div class="cont">
<div class="in1">oneoneone oneone one oneoneoneoneoneon</div>
<div class="in2">two two twotwotwo twotwotwotwo</div>
</div>
table { width: 100%; table-layout: fixed; margin: 0 0 10px; }
th { padding: 10px 10px 0; text-align: left; }
td { padding: 10px; border: 1px solid #ccc; }
.td-label {
display: none;
min-width: 100px;
max-width: 100px;
font-weight: bold;
}
#media(max-width: 500px) {
thead { display: none; }
td {
display: flex;
margin: 0 0 10px;
> div:not(.td-label) {
word-wrap: break-word;
min-width: 1px;
}
}
.td-label {
display: table;
}
}
.cont {
display: flex;
border: 1px solid black;
> div {
&:first-of-type {
min-width: 100px;
max-width: 50px;
}
min-width: 1px;
border: 1px solid #aaa;
word-wrap: break-word;
}
}
The trick is to set the table width to 100%, add a min-width to the second div, and set display: table on the second div. I updated the pen and code above to reflect.
I've been trying to make a button which is inside a td cell in IE9. It's working fine on chrome and firefox (although the latter involved bubbling up height:100% to the td, tr and table elements). Do you have any idea how can I solve this problem using only CSS?
Here's the HTML:
<table>
<tr>
<td>
<span class="stuff">stuff</span>
</td>
<td class="the-td">
<button class="problem-here">
<span>stuff</span>
<span>more stuff</span>
</button>
</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff!</td>
</tr>
</table>
And the CSS:
table {
border-collapse: collapse;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
td, tr {
padding: 0;
margin: 0;
height: 100%;
}
tr {
border: 1px solid black;
}
.problem-here {
margin: 0;
padding: 0;
background: none;
border: none;
background: lightgreen;
width: 100%;
height: 100%;
}
.stuff {
line-height: 100px;
}
.the-td {
width: 70%
}
button span {
display: block;
}
And, finally, here's a fiddle with the problem: https://jsfiddle.net/vh3jodap/10/
Thanks in advance
EDIT: here's a pic of what's happening right now:
http://i.imgur.com/J3hbWTj.png?1
In IE, in order for an element to have height:100%;, all parent elements must have height:100%;.
Any parent missing the height:100%; will cause IE to ignore it all.
Warning There's a high probability your table will grow bigger entirely
Hope this helps!
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;
}
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.