I am making a table and although I did not add any padding, some of the th in table 1 (see fiddle) seem to have a small padding-top. How can I fix that?
http://jsfiddle.net/6a1usq1s/
<table id="table1">
<tr>
<th>
<div class="body-table">VersF)</div>
</th>
<th>
<div class="h2-table">Drse</div>
<div class="body-table subheading">son</div>
</th>
<th>
<div class="h2-table">sne</div>
<div class="body-table subheading">Sstz</div>
</th>
<th>
<div class="h2-table">Br</div>
<div class="body-table subheading">s</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">an</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">a</div>
</th>
</tr>
vertical-align:top;
was the solution :)
You can try to nullify paddings for tr or td to cancel use of the styles installed in the browser by default:
padding: 0;
Then you can set height for div or tr/td, and to use line-height property for regulation of provision of the text in a cell (if the text is located in one line). If height is equal to line-height the text will settle down vertically in the middle.
height: 20px;
line-height: 20px;
Experiment with this property.
Related
I have a table with contents inside of it. I would like to be able to resize the column to 0 pixels so it appears 'gone'. The problem is that since there are contents inside the header and cells, it will only resize down to the size of the content.
I simply want it to work like this: if I set header width to 10px, it should become 10px wide, regardless of what's inside the header or the columns.
I did a workaround by wrapping cell contents into a container, which is positioned absolute:
<table>
<tr>
<th style="width:0px">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">More content, could be an image</div>
</th>
</tr>
</table>
.cell-wrapper
{
position: absolute;
}
But there are multiple issues with this approach. Is there a way I can do this without the absolute positioning/container workaround? Thanks!
You could try something like this..
.cell-wrapper {
border: 1px solid black;
}
<table>
<tr>
<th style="display: table-column;">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">Another cell with long text</div>
</th>
</tr>
</table>
I'm using twitter bootstrap for my CSS on a project I'm working on.
as you can see in the image I've added, the width of my th cell is larger than the actual text I've added in it (which my bootstrap css automatically truncates). I want the red lines to start at the same point my blue line does. But this is being blocked from doing so because of the size of my th cell.
the code for my table is included below:
<table class="table bg-light table-sm table-responsive" style="width: 100%">
<tbody style="width:100%">
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">10.1</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">UNKNOWN</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
</tbody>
</table>
When I change the widths in the div/th cells and all parent tags to a pixel value instead of a percentage, the table does what I want (reduce the th cells size so that the red bars can start where the blue bar starts, text inside the cell becomes truncated) but when it is percentage values, the th cells stay as wide as the largest text in the column (in this case where it says "UNKNOWN").
You have to understand that HTML table will occupy the space it needs to display all the content inside it (it won't truncate it). So, if the table content asks for 2000px the table will respect it. Therefor, your cell width presented in percents will respect the table width. The only way you can really control the table cell width is to change the table layout:
table-layout: fixed;
But please note, it won't behave as a table it used to be. More about fixed table layouts here.
I am currently trying to force all elements inside of a <th> to be on the same line and am having issues doing so. I've reviewed many posts and the common css answer seems to be to use style="white-space:nowrap" on the <th> element.
The code for <thead> is below:
<thead>
<tr>
<th><h5>Some</h5></th>
<th><h5>Thing</h5></th>
<th><h5>Another</h5></th>
<th><h5>Thing2</h5></th>
<th><h5>OneMore</h5></th>
<th style="white-space:nowrap">
<h5>Thing3</h5>
<md-button class="md-icon-button" style="bottom: 4px;margin-left:-3em">
<md-tooltip md-direction="auto" class="multiple-line-tooltip">
Some ToolTip Information Here
</md-tooltip>
<i class="material-icons md-dark">info</i>
</md-button>
</th>
</tr>
</thead>
My issue is that the info icon seems to always display below the "Thing3" h5 element. See picture below:
All help is appreciated.
A h5 is a block level element - this is by design.
Perhaps try an inline element like <b> instead, or use an inline style.
<h5 style="display:inline">
The problem is that <h5> is a block-level element. You should be able to resolve this by simply floating the children of the header cells to the left:
th > * {
float: left;
}
<table>
<thead>
<tr>
<th>
<h5>Some</h5>
</th>
<th>
<h5>Thing</h5>
</th>
<th>
<h5>Another</h5>
</th>
<th>
<h5>Thing2</h5>
</th>
<th>
<h5>OneMore</h5>
</th>
<th>
<h5>Thing3</h5>
<img src="http://placehold.it/50" />
</th>
</tr>
</thead>
</table>
However, the above example replaces the md-button and i with a simple image. If the above doesn't work for you, try replacing float: left with display: inline-block.
Hope this helps! :)
I am trying to add an icon in front of the table.
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<span class="fa fa-pencil pull-left"></span>
<table class="table table-condensed table-bordered">
<thead>
<th class="text-center">Date</th>
</thead>
<tbody>
<tr>
<td class="text-center">01/01/2015</td>
</tr>
</tbody>
</table>
</div>
I need to an pencil on the left of the table on the same line as "Date"
Any help would be appreciated
One of the best tricks for positioning an element involves using the top and position properties.
To make room for the pencil, we are adding a left margin to the table. We're giving the pencil relative positioning and placing it 20 pixels from the top.
Now it appears outside and to the left of the table.
.fa-pencil {
top: 20px;
position: relative;
}
table {
margin-left: 20px;
}
http://jsfiddle.net/a00ykzy0/1/
How can I prevent overly large child content from breaking my responsive layouts in bootstrap?
I've got a responsive layout in bootstrap.
However I am using tables to render table content - these tables get quite large.
<div class="span8">
text
<table class="table table-bordered">
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
</table>
</div>
<div class="span4">
text <br/>
<span style="background:#FF0000">text</span>
</div>
What I am encountering is, that at lower resolutions, then table size is bigger than the span that the table is hosted in.
I would expect the span to "grow" in size ( at least until it span12 equivalent ), letting other spans in the row fall through to a new row, so that it would look like
<div class="span12">
text
<table class="table table-bordered">
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
<th> some</th>
</table>
</div>
<div class="span4">
text <br/>
<span style="background:#FF0000">text</span>
</div>
but only at low resolutions
However, what is happening is, that because the content is bigger than the span, I am simply seeing overlap.
How can I avoid this from happening? ( see attached fiddle )
http://jsfiddle.net/uahVW/3/
Source of the Behavior
Consider the following generic HTML snippet:
<div class="row-wrap ex1>
<div class="floater pane1">Some_long_text_that_is_not_breaking...</div>
<div class="floater pane2">Some text that wraps nicely.</div>
</div>
and the following CSS (not Bootstrap...):
.row-wrap {
outline: 2px dotted lightgray;
overflow: auto;
}
.row-wrap .floater {
outline: 1px dashed red;
float: left;
}
Basically, .row-wrap block element with two floated <div>'s.
See the following demo fiddle: http://jsfiddle.net/audetwebdesign/T9vqg/
In Example 1, I specify the width in % for each .floater:
.ex1 .pane1 {
width: 70%;
}
.ex1 .pane2 {
width: 29%;
margin-left: 1%;
}
In this case, when you shrink the window, the floating elements overlap because their widths are determined by the overall width of the containing block (.row-wrap) and by their definition they will always fit since the sum of widths and horizontal margins is 100%. In this case, long non-breaking text or a table can trigger a content overflow condition.
In Example 2, I set the width to auto on one of the floating child elements.
.ex2 .pane1 {
width: auto;
}
.ex2 .pane2 {
width: 29%;
margin-left: 1%;
}
In this case, you get the expected behavior, the 2nd floating elements wraps to a second line if you make the window narrow enough.
However, eventually, you can make the window narrow enough so that you will get an overflow condition regardless of how you float the elements.
Fixing This In Twitter Bootstrap
I have limited experience with Bootstrap. However, I would probably set up a wide span, row container and define two generic div's within it that float to the left. Just define some custom classes to define the behavior as illustrated in my examples.
Not exactly sure what you're looking for, but for a responsive layout with table cells, using display:inline-block will push table cells that don't fit in the container to the next line. Check out the fiddle.