I convert table element to all divs, but div of element does not expand like colspan="5" when width attribute is set 100%. How to make it expands full width? How to expand full width 2nd row?
<style>
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
width: 100%;
padding: 10px;
border: black solid 1px;
}
</style>
<div class="table">
<div class="tr">
<div class="td">Product</div>
<div class="td">Unit Price</div>
<div class="td">Quanity</div>
<div class="td">Total Points</div>
<div class="td">Temp</div>
</div>
<div class="tr">
<div class="td">
<span>Serial Number</span>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input maxlength="50" name="serialNo" id="serialNo" type="text">
</div>
</div>
</div>
</div>
Use table-layout: fixed:
.table {
display: table;
width: 100%;
table-layout: fixed;
}
Also, I would recommend you to use <table> instead of <div> in the tabular form.
Related
Using Bootstrap. I want the top div to be of fixed height according to the content and the bottom div to fill out the remaining height of the parent. The total height should be 100%.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div>
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
CSS:
html, body{
height: 100%;
}
.container-fluid, .row, .col-lg-6, #test{
height: 100%;
}
.fill {
background-color: #FF0000;
height: 100%
}
However it seems like the bottom div is exactly 100% and overflows. The idea is also that there will be several columns.
Thanks in advance!
Fiddle: https://jsfiddle.net/eb8v57pe/4/
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div id="test">
<div class="header">
Fixed height according to content.
</div>
<div class="fill">
Rest of the height
</div>
</div>
</div>
</div>
</div>
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html, body{
height:100%;
padding: 0;
border: none;
margin: 0;
}
.container-fluid, .row, .col-lg-2{
height: 100%;
}
#test {
display: table;
width: 100%;
height: 100%;
}
#test > .header {
display: table-row;
height: 1%;
}
#test > .fill {
display: table-row;
background-color: #FF0000;
}
I've been spinning my wheel on this little thing for hours now.
I have a div. In that div, I want two buttons on the right-hand side (side-by-side) and the rest of that row filled in by an input field. I've tried countless combinations of CSS options and I can't figure it out.
I need item1 and item2 to be side-by-side and taking up the entire width of the parent div.
Any ideas from the CSS gurus? Thanks!!
http://jsfiddle.net/vasxmg1d/
<div style="width: 50%; border: 1px solid black; height: 300px;">
<br/>
<div style="width: 100%">
<input id="item1" type="text" style="width: 100%"/>
<div id="item2">
<button>button1</button>
<button>button2</button>
</div>
</div>
</div>
Modern approach - flexbox
Use flexbox - set the wrapper <div> to display: flex and the <input> to flex: 1 (effectively flex-grow: 1):
#wrapper {
display: flex;
}
#item1 {
flex:1;
}
http://jsfiddle.net/vasxmg1d/10/
More info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Older approach - table layouts through CSS
If you prefer to use table layouts, at least do it through CSS instead of introducing table markup in your HTML (but you will need to add a wrapper element around your input to achieve it)
http://jsfiddle.net/vasxmg1d/12/
<div id="item1">
<input type="text"/>
</div>
and the CSS
#wrapper {
display: table;
}
#item1,#item2 {
display: table-cell;
white-space: nowrap;
}
#item1 {
width: 100%;
}
#item1>input {
width: 100%;
}
You cound using tables also
Follow this:
<div style="width: 50%; border: 1px solid black; height: 300px;">
<br/>
<table style="width: 100%">
<tr>
<td width="100%"><input type="text" style="width: 100%;box-sizing:border-box;"/></td>
<td><button>button1</button><br><button>button2</button></td>
</tr>
</table>
</div>
Not to sure if I get your question. Nevertheless, I just played around with the percentages. Check out the JS.
http://jsfiddle.net/vasxmg1d/2/
<input id="item1" type="text" style="width: 65%"/>
I placed a perctange on your button so they can fit.
button{
float:left;
width:15%;
}
Position the buttons to the right using float: right. Set the width of the textbox using width: calc(100% - x) where x is the width of the buttons:
input[type=text] {
width: calc(100% - 122px);
box-sizing: border-box;
}
If you don't know the width of the buttons, you can get it with JavaScript:
var buttons = document.querySelector(".buttons");
var input = document.querySelector("input[type=text]");
input.style.width = "calc(100% - " + buttons.offsetWidth + "px)";
.box {
width: 50%;
border: 1px solid black;
height: 300px;
padding-top: 30px;
}
.buttons {
float: right;
}
input[type=text] {
box-sizing: border-box;
}
<div class="box">
<input type="text"/>
<div class="buttons">
<button>button1</button>
<button>button2</button>
</div>
</div>
I have a table with two rows and three columns. The two right cells are smaller in width than the two left ones. Why is this? The content is the same in both. Thx for help.
<div id="tableContain">
<div id="tabRow1">
<div id="tabCell">The gibberish (nonsense text) presented here </div>
<div id="tabCell"> <img src="images/Flora/tree-of-life.jpg" /> </div>
<div id="tabCell">The gibberish (nonsense text) presented here </div>
</div>
<div id="tabRow2">
<div id="tabCell">The gibberish (nonsense text) presented here </div>
<div id="tabCell"> <img src="images/Flora/tree-of-life.jpg" /> </div>
<div id="tabCell">The gibberish (nonsense text) presented here </div>
</div>
</div>
#tableContain {
display: table;
width: 600px;
margin: auto;
border-spacing: 10px;
}
#tabRow1, #tabRow2 {
display: table-row;
}
#tabCell {
display: table-cell;
border: 2px solid gray;
padding: 10px;
border-collapse: collapse;
}
img {
width: 200px;
}
I added width: 33%; to #tabCell. FIDDLE
This makes all the columns equal in width.
Try this.
#tabRow1, #tabRow2 {
display: table-row;
width: 600px;}
Help newbie in div for php or html without using css or table.
Trying to do this 4 x column, 2 x row using div with the following behavior
// [.....adjustable....][fixed][fixed][fixed]
// [.....adjustable....][fixed][fixed][fixed]
Below are my codes----------------------------------------
<form action="welcome.php" method="get">
<div style="position: relative; width: 100%; ">
<div id="left" style="position:relative;float:left;width:68%;"> left </div>
<div id="right" style="float:left;width:13%;"> Name: </div>
<div id="right2" style="float:left;width:13%;"> Age: </div>
<div id="right3" style="float:left;width:6%;"></div>
</div>
<div style="position: relative; width: 100%; ">
<div id="left2" style="position:relative;float:left;width:68%;"> left2 </div>
<div id="right4" style="float:left;width:13%;"> <input type="text" name="name"></div>
<div id="right5" style="float:left;width:13%;"> <input type="text" name="age"></div>
<div id="right6" style="float:left;width:6%;"> <input name="submit" type="submit"></div>
</div>
The 68% is equal to 860 pxl on my screen. It should change if it goes to other screen resolution. I tried making the 68% to 100% and the other div with id=right to style="position:fixed..." but it just mess up and puts everything on left side.
The easiest way of accomplishing this, is by using display: table and display: table-cell, to style divs as a table, without using an actual table:
Example on jsbin. See display on mdn.
I'll add both the CSS version and the, discouraged, inline style version to this post:
CSS version
<div class="parent">
<div class="left">ASDF</div>
<div class="right">asdf</div>
<div class="right">asdf</div>
<div class="right">asdf</div>
</div>
With CSS:
.parent {
display: table;
width: 100%;
}
.left {
width: auto;
border: 1px dotted blue;
display: table-cell;
}
.right {
display: table-cell;
width: 50px;
border: 1px dotted green;
}
Inline style version
<div style="display: table; width: 100%;">
<div style="display: table-cell;">ASDF</div>
<div style="display: table-cell; width: 150px;">asdf</div>
<div style="display: table-cell; width: 150px;">asdf</div>
<div style="display: table-cell; width: 150px;">asdf</div>
</div>
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}