How to turn this:
Into this:
In this fiddle:
https://jsfiddle.net/d3ckh9qd/2/
table{
width:100%;
border-collapse:collapse;
}
td{
border:1px solid red;
padding:10px;
}
.td-left{
width:100%;
}
.div-parent{
width:800px;
border:5px solid rgba(0,255,255,0.7);
}
.div-right{
white-space:nowrap;
background:rgba(0,0,255,0.1);
}
.pre-scrollable{
background:rgba(0,255,0,0.3);
padding:10px;
white-space:pre;
overflow:auto;
width:100%;
box-sizing:border-box;
}
<div class="div-parent">
The table below should not exceed parent container:
<table>
<tr>
<td class="td-left">
<strong>This column should fill the remaining width, respecting the dynamic width of the right column</strong><br>
<pre class="pre-scrollable">This should match width of the parent container and it's content should scroll horizontally.</pre>
</td>
<td class="td-right">
<strong>This column should autosize to it's contents</strong><br><br>
<div class="div-right">
Dynamically generated content goes here
</div>
<br>
<div class="div-right">
This content has different width each time it loads
</div>
</td>
</tr>
</table>
</div>
set a fixed width by px for the right one and a 100% width for the left one and a overflow-x
Make sure to set your table-layout to fixed and then just have your td's set to the percentage you want ( in my case its 60/40 ).
https://jsfiddle.net/d3ckh9qd/6/
CSS
table{
width:100%;
border-collapse:collapse;
table-layout: fixed;
}
td{
border:1px solid red;
padding:10px;
}
.td-left{
width:60%;
}
.td-right{
width:40%;
}
.div-parent{
width:100%;
border:5px solid rgba(0,255,255,0.7);
}
.pre-scrollable{
background:rgba(0,255,0,0.3);
padding:10px;
white-space:pre;
overflow:auto;
width:100%;
box-sizing:border-box;
}
.div-right {
word-wrap: break-word;
}
Related
I am encountering strange pixel discrepancy in Google Chrome (not Firefox). See above image or run the code snippet below.
In red border can be seen the table. Orange: div in td. Grey: td. I expect both to have the same height. Why dont they? The left one is half a pixel bigger. If you zoom it with Chrome, the difference resolves. Is this some kind of bug in Chrome? Do I have to use px as a measurement instead? I do not want to, since I am rendering a to-be-printed page here.
I tried hard to remove any unnecessary parts.
* {
margin:0;
padding:0;
}
#wrapper1 {
padding-top: 5mm;
background:lightblue;
}
#wrapper2 {
display: flex;
flex-direction: column;
background:lightgrey;
}
table {
border-collapse: collapse;
border: 1px solid red;
margin-top:7mm;
}
td, .box {
width:12mm;
height:12mm;
}
td {
background:grey;
}
.box {
background:orange;
}
<div id="wrapper1">
<div id="wrapper2">
<table>
<tr>
<td>
<div class="box"></div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
mm units do not convert into a whole number of pixels. For example, 12mm is 45.354330709px. Unfortunately, browsers handle rounding differently since no CSS spec is provided for how it should be done.
As an example, I have converted your mm units to use px. I scaled it up/down by a factor of 10 and no longer see a difference in where the borders are placed.
* {
margin:0;
padding:0;
}
#wrapper1 {
padding-top: 5mm;
background:lightblue;
}
#wrapper2 {
display: flex;
flex-direction: column;
background:lightgrey;
}
table {
border-collapse: collapse;
border: 1px solid red;
margin-top:70px;
}
td, .box {
width:120px;
height:120px;
}
td {
background:grey;
}
.box {
background:orange;
}
<div id="wrapper1">
<div id="wrapper2">
<table>
<tr>
<td>
<div class="box"></div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
I have trouble with width size of a table inside a flex-item.
I want the flex item parent fit the table width (table-layout property must stay auto).
I do not have the same result on IE11 (KO) and chrome (OK).
Minimal reproduction : https://codepen.io/anon/pen/OjweJw?editors=1100.
.wrapper{
background-color:PALEGREEN;
display:flex;
padding: 15px 15px 0 15px;
font-size:20px;
}
.div1{
background-color:LIGHTCORAL;
flex-grow:0;
flex-shrink:0;
flex-basis:300px;
max-width:300px;
overflow:hidden;
}
.div2{
background-color:LIGHTBLUE;
flex-grow:1;
flex-shrink:1;
flex-basis:0px;
}
.div2 p{
border:10px solid black;
}
table, th, td {
border: 1px solid black;
}
<div class="wrapper">
<div class="div1">
<p>sidebarrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
</div>
<div class="div2">
<p>tableau header</p>
<table>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
<tr>
<td>Cellule A1jhkfdsahjfdslkjhfdsalkjhfdsalkjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsakjhfdsalkjhlkjhfdsalkjhfdsalkjhfdsakjfdsakjhfdsalkjhfdsalkjh</td>
<td>Cellule A2</td>
<td>Cellule A3</td>
</tr>
<tr>
<td>Cellule B1</td>
<td>Cellule B2kjfdsakjfdyslkjfdsalkfdsalkjfdsalkjfdsalkjfdsalkjfdsalkjfdsalkjfdsalkj</td>
<td>Cellule B3</td>
</tr>
</table>
</div>
</div>
How make it works on IE too ?
Thanks,
Autofocus.
I have a table and in one of the columns I have some graphics. What I need is a vertical line 20px from left on top of all what is in the td element.
I tried something like this but the result is not good.
<td>
<div>
<!-- my vertical line -->
<div style="width:20px; height:30px; z-index:1011; border-right: thin solid red;">
</div>
<!-- other content under the vertical line in td -->
<!-- here width can be more than 20px -->
<div style="width:5px; height:10px; z-index:1001; background-color:gray;"> </div>
</div>
</td>
I have also tried with position: relative; for "main div" and absolute for other 2 but not a good result.
With this in place is perfect, I just need to add a vertical line on top of this 20 px from left
<td>
<div>
<div style="width:5px; height:10px; z-index:1011; background-color:gray;"> </div>
</div>
</td>
red line
--------|----------td-----
|
--------|-- some line (one div in may case)
|
--------|---------</td>---
--------|---------<td>----
|
--- | other line
|
------------------</td>---
Fiddle wrong result ("not good")
this is what is expected
There are numerous pitfalls with a table used for creating a chart.
First, the table's cellspacing and the cells vertical padding must be set to zero to make the red line all the way from top to bottom. Second, the height should probably be set to some value, so the inner div of the last cells in a row can be set to 100% height in order to make the red line go from top to bottom within a cell (it also needs to be position absolutely due to possible overlap). Third, to make the horizontal lines appear in the middle of the cells, all cells should have a fixed line-height and the horizontal lines should be displayed as inline-block with vertical-align: middle.
table tr td {
height: 30px;
padding: 0 10px;
line-height: 30px;
}
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
line-height: 20px;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.vertical-line{
width:0px;
z-index:10011;
border-right: thin solid red;
position: absolute;
height: 100%;
left: 20px;
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
td, td > div {
height: 100%;
position: relative;
line-height: 30px;
}
<table cellspacing="0">
<tr>
<td>1</td>
<td>11</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-5"></div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td>
<div>
<div class="vertical-line" ></div>
<div class="horizontal-line width-30"></div>
</div>
</td>
</tr>
</table>
Note: I also added and altered some other minor stuff like border-radius to reflect your screenshot a bit. If you want to play around, here is the fiddle.
I just made minor changes to your stylesheets and its working.
.horizontal-line{
height:10px;
z-index:1001;
background-color:gray;
margin-left: 5px;//addes this
}
.vertical-line{
height:30px;
width:20px;
z-index:10011;
border-right: thin solid red;
position: absolute;//and this
}
.width-5{
width:5px;
}
.width-30{
width:30px;
}
Let me know if you are satisfied with this answer. :)
Try this :-
<div style="width:5px; height:10px; z-index:1001; background-color:gray;padding-left: 20px"> </div>
or
<div style="width:5px; height:10px; z-index:1001; background-color:gray;margin-left: 20px"> </div>
Hope this'll help.
I need to create a layout that has a toolbar, a (variable height) tab line, a content view and an info view. The entire content must always fill the entire browser window, without causing a scrollbar to appear. Only the content and info panels can have scrollbars, and only when they overflow. My layout so far seems to be working in Chrome, but not in Firefox or Internet Explorer. I can't use absolute positions, because the tab line can vary in height, and I would really like to avoid using JavaScript for layout.
Right now I have this markup:
<body>
<table>
<tr>
<td colspan="2" class="toolbar">toolbar</td>
</tr>
<tr class="tabs">
<td colspan="2" class="tabs">tabs</td>
</tr>
<tr>
<td class="content">
<div>content content content content</div>
</td>
<td class="info">info</td>
</tr>
</table>
</body>
And this css:
html, body, body > table {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body > table {
border-collapse: collapse;
border-spacing: 0;
}
body > table > tbody > tr > td {
padding: 0;
vertical-align: top;
}
.toolbar { background-color: red; }
.tabs { background-color: green; }
.content {
background-color: blue;
height: 100%;
}
.content > div {
height: 100%;
overflow: auto;
}
.info {
background-color: yellow;
width: 300px;
}
It must look like this:
Try something like this fiddle
Its more complicated than a regular table layout using CSS, but should work for you with some tweaking.
HTML
<div class='viewport'>
<div class='caption'>
<div class='toolbar'>toolbar</div>
<div class='tabs'>tabs</div>
</div>
<div class='row'>
<div class='content'>content</div>
<div class='info'>info</div>
</div>
</div>
CSS
body, .viewport{
height:100%;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}
.viewport{
display:table;
position:fixed;
height:100%;
}
.row{
display:table-row;
}
.caption{
display: table-caption;
}
.content, .info{
display:table-cell;
}
.toolbar{
background:red;
}
.tabs{
background:green;
}
.content{
background:blue;
}
.info{
background:yellow;
}
The image basically shows what is happening. I have a wrapper of 1270px. Inside that wrapper (indicated by the vert line on the right) I have 4 divs and one table. The table contents is pushing past the page wrapper. THe page wrapper does not have a float as it is only to center the content on the page.
I have tried the following but nothing works:
border: none;
padding: 0px;
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
What is causing this? This is also allowing all the other content from the other 4 divs to push past the page wrapper as well.
EDIT:
<div id="wrap-page">
<div id="wrap-content">
<table id="content">
<tbody>
<tr>
<td id="featured">
<h1>h1</h1>
<p>Lorem ipsum</p>
<h2>h2</h2>
<p>Lorem ipsum</p>
</td>
<td class="sidebar">
<p>Lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
html, body{
width:100%;
margin:0;
padding:0;
background:#ccc;
font-size:100%;
line-height:1;
font-family:Arial;
}
#wrap-page{
float:left;
margin:auto;
width:1270px;
}
#wrap-content{
margin:0 5px;
border:1px solid;
}
#content{
position:relative;
float:left;
border-collapse:collapse;
width:1270px;
margin:7px 0;
}
#featured{
width:822px;
}
.sidebar{
width:193px;
vertical-align:top;
}
Your inner divs widths and table is greater than your outer wrapper of 1270px.
It looks like you are just trying to add a border to your text...
Please try this alternative (without tables):
http://jsfiddle.net/UXKTA/9/
.test
{
padding: 5px;
border: 1px solid black;
width: 200px;
}