This question already has answers here:
How to make <div> fill <td> height
(6 answers)
Closed 2 years ago.
Hi i have problem to make empty button in bootstrap table to 100% height. This is my case: jsfidle
I used this but empty button is not set on 100%
td{
padding:0;
}
td button, td div{
width:100%;
height:100%;
}
table th, table td {
padding: 0!important;
}
Another option is to just put a (non-breaking space) in the empty <Button> element:
<Button class="btn btn-success"> </Button>
Fiddle for the nbsp method
Or you can use this css method which uses the ::before selector and the content property with an escaped unicode character. In this case \00a0 which is equivalent to
td button.btn.btn-success::before {
content: '\00a0';
}
Fiddle for the css method
To fix your issue on the empty button you should use a CSS, instead of giving the height to 100%, you can simply place a value in pixels for that for example 25px seems to work the case.
td{
padding:0;
}
td button, td div{
width:100%;
height:25px;
}
table th, table td {
padding: 0!important;
}
Here is the result of your question:
https://jsfiddle.net/79jzkwup/
Related
I'm using a library that generates tables with headers like this
<th>
<span class="xxx">header title</span>
<span class="sort_icon"/>
<input text (optional, depending on column definition for filtering) class="yyy">
</th>
what I would like to do is with pure css make the header title and sort icon align to top of the th element, and input element if present to the bottom of th element.
My problem is that vertical-align can be set only to th element and thus making both spans and input to go top or bottom, but I cannot figure out a way to align differenty spans and input
Usually in this type of situation it's easier to use absolute positioning:
<style type="text/css">
.th
{
position:relative;
}
.xxx
{
position:absolute;
top:0px;
left:0px;
}
.yyy
{
position:absolute;
bottom:0px;
left:0px;
}
</style>
The only drawback is you have to make sure the height of the th is enough to accomodate the sort icon. That's pretty easy - just set a height and any necessary margin/padding on it, or on the th.
Fixid position is an option, but it is going to be hard to keep the input box on the bottom since you don't know how much content will be in the header. It might go on 2 lines and others on 1.
You might try something in like in the example below. The span tags aren't block elements so you cannot move the so easely. Therefor, use display:block and then work with margins and padding.
PS.: better use css file... inline styles are just for example
<table>
<tbody><tr>
<th style="
max-height: 100px;
background-color: red;
vertical-align: top;
">
<span class="xxx" style="
display: block;
">header title</span>
<span class="sort_icon" style="
display: block;
margin-top: 200;
">
<input text="" (optional,="" depending="" on="" column="" definition="" for="" filtering)="" class="yyy">
</span></th>
</tr>
</tbody></table>
This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 7 years ago.
I'm working on maintaining a bit of code that's out of whack at the moment. Basically, we have a <div> tag with it's own style settings, and we have multiple logic tags that will display different <span> tags, which will hold different bits of data.
What I'm seeing is that when I'm using a <span> tag with a style setting float: left; this is causing the <div> tag's color box to not wrap around the <span>.
Here's a sample of the code:
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
</div>
I need this span tag to go left, due to requirements. Was wondering what my options are for this to work?
Original jsFiddle
Add overflow:auto to the parent div:
#testData {
overflow:auto;
}
jsFiddle example
Other way is to make use of clear: both
#testData:after {
clear: both;
display: block;
content: "";
}
Fiddle
Other solutions:
Using overflow: hidden
#testData {
overflow: hidden;
}
Or making a dummy element <div class="clearBoth"></div>
HTML
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
<div class="clearBoth"></div>
</div>
CSS
.clearBoth {
clear: both;
}
http://jsfiddle.net/gLfw5wc7/3/
#testData {
padding:4px;
width: 100%;
border: 1px solid #999;
background: #d1d1d1;
text-align:right;
}
#testData:after {
content:"";
clear: both;
display: table;
}
#testData > span {
padding: 3px 1px 1px;
float:left;
}
This is known as a clearfix. When floating an element, it gets out "the flow" of the document. This also means that its width and height aren't taken into account by the parent. That's why #testData seems to collapse: it thinks it doesn't have content. To fix this there are some options. The easiest is to use overflow, however, that's bad practice imo. In this particular case it works, but in some other cases you won't be able to use it because content that overflows the parent will either be hidden (overflow: hidden) or a scrollbar will appear (overflow: auto).
The most common and proper solution is to use a pseudo element to fix this. :after is such a pseudo element (see this question for :after vs ::after). Basically, a pseudo element can create an element in CSS that is not visible in HTML.
Every time you use float, you'll be needing a clearfix. Therefore it's useful to create a .clear class which you can apply to every element that needs to clear floats. It would look like this.
HTML
<div id="testData" class="clear">
<span>
TestData: Float Left
</span>
</div>
CSS
.clear:after {
content:"";
clear: both;
display: table;
}
Now you can add class="clear" to every element that needs to be cleared. If you are into SASS, you might find this answer helpful but considering you are new to HTML, I'd suggest sticking to HTML and CSS first.
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Closed 7 years ago.
HTML
<span class="symbol">$</span>
<span class="value">400</span>
This displays both "$" and "400" at the same level.
The moment I add
CSS
.symbol {
font-size: 2em;
}
then, "400" is pushed down.
Question: Why is "400/.value" affected by changes to "$/.symbol" ?
Thanks.
http://codepen.io/anon/pen/emLLrm
This question realistically is about vertically aligning, and can be solved using
vertical-align:middle
or
vertical-align:top;
to override the default baseline (which by default is set to the bottom).
Demo:
.symbol {
font-size: 2em;
vertical-align:middle;
}
<span class="symbol">$</span>
<span class="value">400</span>
In addition if you want more control over the positioning in relation to the number, use position:relative and top: on the symbol to position where you'd like. For instance:
.symbol {
font-size: 2em;
position:relative;
top: .3em; /* or 10px if you want to use pixels */
}
I want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.
This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. I have a fiddle where I tried to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.
How can I add the border to the div without it affecting the containing table?
Look at my JSFiddle.
You need to provide a width/height to your cells:
td {
// ...
width:33.3%;
height:33.3%;
}
How about using an inset box-shadow?
.selected {
box-shadow: inset 0px 0px 0px 2px red;
}
OK, since I've seen a some support for my response in the comments, here it as an answer :)
Presize your cell by adding a yellow 'hidden' border to the .unselected state:
CSS
.unselected {
background-color: yellow;
border: 2px solid yellow; // Presize with this yellow border
}
div {
..
line-height: 1; // Add line-height to regulate size (optional)
}
Codepen example.
Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.
table {
table-layout: fixed;
}
.selected {
padding: 1px;
}
See JSFiddle
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
I need my html table's body to scroll and its head to stay put
I have a basic table:
<div>
<table>
<thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
<tbody><tr><td>sweet</td><td>tooth</td></tr></tbody>
</table>
</div>
So I have 200 rows in the body section and want to make it so that when I scroll the thead section stays on top while everything else flows underneath it. Is there anyway to do this in CSS?
Following styles:
div {
max-height:400px;
overflow:auto;
}
I can't figure out how to do this. I tried to make the scroll part just tbody, but when I do that the max-height portion doesn't take effect for some odd reason. Also if I break it up into 2 tables then the columns won't be the correct widths. I also can't state what the widths are beforehand as the data changes rapidly so it needs to be able to be changeable.
Any ideas? I'm lost.
edit: Actually, this appears to break the connection between the header and the table, so the header columns don't line up. I'll leave this here though in case someone can get it to work.
How about this. The header is rendered position:absolute, so it won't move. But you have to explicitly position the table down to give it room.
.relative {
position:relative;
}
.table {
margin-top:18px;
max-height:400px;
overflow:auto;
}
thead {
position:absolute;
top: -18px;
}
<div class="relative">
<div class="table">
<table>
<thead><tr><th>col 1</th><th>Col 2</th></tr></thead>
<tbody>
<tr><td>sweet</td><td>tooth</td></tr>
</tbody>
</table>
</div>
</div>
Change 18px to be whatever the height of your thead should be.
Working sample: http://jsfiddle.net/EYjd5/1/
One of the possible methods is to create another table inside the main tbody, limit its height, and make sure you get scrollbars on overflow by using overflow: scroll;. Of course, for the columns to line up, you need to imitate the effect of the table header, I did that by inserting a hidden row identical to the header in the end of the new table (you should hide it using visibility: hidden; opacity: 0; not using display: none; otherwise this won't work). Here's a sample:
HTML:
<table>
<thead><tr><th>Name of show</th><th>Greatness</th></tr></thead>
<tbody><table class = "limitedcontent">
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr><td>Glee</td><td>100%</td></tr>
<tr class = "placehold"><th>Name of show</th><th>Greatness</th></tr>
</table></tbody>
</table>
CSS:
.limitedcontent {
height: 150px; /*or whatever your limit is*/
overflow-y: scroll;
overflow-x: hidden;
display: inline-block;
}
.placehold {
visibility: hidden;
opacity: 0;
height: 0px;
overflow: hidden;
}
And a little demo: little link.
I hope that helped in any manner!
In case you're a jQuery-lover, you can use the DataTables jQuery plug-in to achieve exactly that.