The Dompdf has a bug that it does not base on the div css to scale size which the div has over the page size. I have tried the table which the css not work for it. How can i limit the size?
Here is the code:
HTML
<style>
.table {
display: table;
width:100px;
padding:5px;
}
.row {
display: table-row;
border-bottom: 1px solid black;
width:100px;
}
.cell {
display: table-cell;
width:100px;
border: 1px solid #000000;
text-align:left;
padding:3px;
}
.cell_DB{
width:100px;
}
</style>
<div class="table cell_DB" border="0" cellpadding="3">
<div class="row cell_DB" >
<div class="cell cell_DB" >
Title
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br/>
<br/>
</p>
</div>
</div>
<div class="row cell_DB">
<div class="cell cell_DB">
<p class="cell_DB" style="color: blue">
</p>
</div>
</div>
</div>
This is currently solution which make the display to be block.
.cell_DB{
display:block;
}
<p style="word-wrap:break-word;width:98%;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
Try adding <div style="width:80%;"> ....CODES... </div> after </style> tag
Related
#create-summary {
width: 200px;
height:150px;
margin-top:20px;
overflow-x:auto;
overflow-y:auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2
<div class="lv5">1.2.2.2.1. Title1.2.2.2.1</div>
<div class="lv5">1.2.2.2.2. Title1.2.2.2.2
<div class="lv6">1.2.2.2.2.1 Title1.2.2.2.2.1</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the
class "lv6" and class"lv5" is not display correctly even I set overflow-x:auto.
How to set overflow:x auto to make it correctly?
You mean like that?
#create-summary {
width: 180px;
height:200px;
margin-top:20px;
overflow-x: auto;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
white-space: nowrap;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
You need to make the whole div larger, Or you can set overflow-x to scroll.
#create-summary {
width: 250px;
height:200px;
margin-top:20px;
}
.lv2 {
margin-left:15px;
}
.lv3, .lv4, .lv5, .lv6{
margin-left:15px;
}
#create-summary div {
border:1px solid red;
}
<div id="create-summary">
<div class="lv1">
1. Title1
<div class="lv2">1.1. Title1.1</div>
<div class="lv2">
1.2. Title1.2
<div class="lv3">1.2.1. Title1.2.1</div>
<div class="lv3">
1.2.2. Title1.2.2
<div class="lv4">
1.2.2.1. Title1.2.2.1
<div class="lv5">1.2.2.1.1. Title1.2.2.1.1</div>
</div>
<div class="lv4">1.2.2.2. Title1.2.2.2</div>
</div>
</div>
</div>
</div>
Add CSS white-space: nowrap; to lvl elements.
I want to do the following with div construction:
<table border="1">
<tr>
<td>Field 1</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 2 longest</td><td><input type="text"></td>
</tr>
<tr>
<td>Field 3 long</td><td><input type="text"></td>
</tr>
</table>
http://jsfiddle.net/6AvMm/
the main problem is, how to do the first column as width as the longest (field 2) ? You know, tables are only for tabulary datas - and this case is clearly a layout.
using display:table display:table-row; AND display:table-cell;
Updated fiddle
HTML:
<div class="holder">
<div class="row">
<div class="cell">Field 1</div>
<div class="cell"><input type="text" /></div>
</div>
<div class="row">
<div class="cell">Field 2</div>
<div class="cell"><input type="text" /></div>
</div><div class="row">
<div class="cell">Field 3</div>
<div class="cell"><input type="text" /></div>
</div>
</div>
CSS:
.holder{
display:table;
border:1px solid #000;
border-width:1px 1px 0 0;
}
.row{display:table-row;}
.cell{
display:table-cell;
border:1px solid #000;
border-width:0 0 1px 1px;
}
DEMO
This would typically be done with floats. Using display: table is usually still not advised for layouts.
<div class="column">
<div class="row">
<p>Your content</p>
</div>
<div class="row">
<p>Your content (longest field)</p>
</div>
</div>
<div class="column">
<div class="row">
<p>Your content</p>
</div>
<div class="row">
<p>Your content</p>
</div>
</div>
CSS:
.column{
float: left;
}
Demo Fiddle
This provides a lot of flexibility as you can easily adjust the amount of rows separately in each column, or simply skip the whole "row" thought and just write your content with headings in the column divs. Example
Using this method, you will have a lot more control over margins and positioning (needed for layouts), compared to the table method.
It seems like you're trying to move away from tables because of the semantic reason that tables are not suitable for layout. Therefore, I think you will have problems with your layout in the future if you just use display: table-cell and the way that property functions is changed. I would recommend using something like the following CSS to abandon tables completely:
div.tr {
display:block;
border: 1px solid;
position: relative;
padding: 3px;
}
div.tr div.td {
display: inline-block;
border: 1px solid;
padding: 3px;
}
div.tr div.td:first-child {
min-width: 35%;
}
.table {
width: 40%;
padding: 3px;
border: 1px solid;
}
http://jsfiddle.net/6AvMm/6/
I want to use div elements to create a table-like layout.
What I want
.tableStyle td {
background: red;
color: #fff
}
.contentBox {
min-height: 200px;
}
<table class="tableStyle" width="100%" cellspacing="10">
<tr>
<td width="25%">
<div class="contentBox">One</div>
</td>
<td width="25%">Two</td>
<td width="50%" colspan="2">Three</td>
</tr>
<tr>
<td colspan="2">
<div class="contentBox">Four</div>
</td>
<td colspan="2">Five</td>
</tr>
</table>
What I have
.table {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 10px;
color: #fff
}
.table .row {
display: table-row;
}
.table .table-cell {
display: table-cell;
background: red;
width: 50%;
}
.contentBox {
min-height: 200px;
}
.table .smlCell {
width: 25%;
}
.table .table {
border-spacing: 0;
}
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div class="contentBox">One</div>
</div>
<div class="table-cell smlCell">
Two
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>
I want to have equal spacing between the cells marked "One" and "Two".
I also want all cells in a row to be of same height.
After searching on net, I know that there are some limitations or issues
for display: table such as a lack of colspan/rowspan equivalents which may help what I'm trying to accomplish.
Is there anyway (apart form <table>) to create this?
Sure there is!
Demo Fiddle
HTML
<div class='table'>
<div class='row'>
<div class='table'>
<div class='cell'>One</div>
<div class='cell'>Two</div>
</div>
<div class='cell'>Three</div>
</div>
<div class='row'>
<div class='cell'>Four</div>
<div class='cell'>Five</div>
</div>
</div>
CSS
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.table {
display:table;
width:100%;
height:100%;
}
.cell {
display:table-cell;
width:50%;
}
.row {
display:table-row;
}
.cell {
background:red;
color:white;
border:5px solid white;
}
Try this. I have used inline instead of CSS class. You had placed one div in wrong location.
<div class="table">
<div class="row">
<div class="table-cell">
<div class="table">
<div class="row">
<div class="table-cell smlCell">
<div style="width:50% float: left" class="contentBox">One
</div>
<div style="width:50% float: right" class="contentBox">
Two
</div>
</div>
</div>
</div>
</div>
<div class="table-cell">Three</div>
</div>
<div class="row">
<div class="table-cell">
<div class="contentBox">Four</div>
</div>
<div class="table-cell">Five</div>
</div>
</div>
with support for older (ms-explorer?). But if your content is table by it's nature, use table and not those tricks :-)
<!DOCTYPE HTML>
<html>
<head>
<title>Bla!</title>
<style type='text/css'>
/* reset sizing model ... */
* { box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
/* basic div definitions */
div { display:inline-block; min-height:50px; background-color:red; border:solid 3px white; }
/* 1/2 line div */
div.half { width:50%; }
/* 1/4 line div */
div.quater { width:25%; }
</style>
</head>
<body class='body' id='body' >
<div class='quater'> One </div><div class='quater'> Two </div><div class='half'> Three </div><div class='half'> Four </div><div class='half'> Five </div>
</body>
</html>
I'm using div instead of table but I am not getting the border increased while the content increase in a column.
<div class="divTable">
<div class="headRow">
<div class="divCell" align="center">Customer ID</div>
<div class="divCell">Customer Name</div>
<div class="divCell">Customer Address</div>
</div>
<div class="divRow">
<div class="divCell">001</div>
<div class="divCell">002</div>
<div class="divCell">am unable to get the white space between col while the content increases</div>
</div>
<div class="divRow">
<div class="divCell">xxx</div>
<div class="divCell">yyy</div>
<div class="divCell">www</div>
</div>
<div class="divRow">
<div class="divCell">ttt</div>
<div class="divCell">uuu</div>
<div class="divCell">Mkkk</div>
</div>
</div>
.divTable{
display:table;
width:auto;
background-color:#eee;
border:1px solid #666666;
border-spacing:5px;
}
.divRow{
display:table-row;
width:auto;
clear:both;
background-color:#ccc;
}
.divCell{
float:left;
display:table-column;
width:100px;
border-left: 2px solid #fff;
}
Kindly go through the link below:
http://jsfiddle.net/vasanthanvas/H4Zug/
You must use display:table-cell instead of display:table-column and remove float:left for .divCell.
And add this style:
.headRow{
display:table-row;
}
http://jsfiddle.net/4Y6cJ/3/
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 8 years ago.
How can I align 3 divs in one line left-center-right without having to define explicit sizes?
Left should be aligned most to the left edge, and right to the right edge.
The following does not work:
<div style="float: left;">
left
</div>
<div style="float: right;">
right
</div>
<div style="margin: 0 auto;">
center
</div>
Add a wrapper div and give text-align:center
CSS
.wrap{
text-align:center
}
HTML
<div class="wrap">
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="center">
center sdv dg sdb sdfbh sdfhfdhh h dfh
</div>
</div>
DEMO
Heres an example of how to do this by placing the floats in the correct order.
jsFiddle Example
<div class="square" style="float: left;">left</div>
<div class="square" style="float: right;">right</div>
<div class="square" style="margin:0 auto !important;">center</div>
.square {
width:50px;
height:50px;
background-color:#ff0000;
text-align:center;
border: 1px solid #000;
}
<div style="width:100%;margin:0 auto; padding: 0">
<div style=" float:left;width:32%;border: thin solid black">
left
</div>
<div style=" float:left;width:32%;border: thin solid black">
center
</div>
<div style=" float:left;width:32%;border: thin solid black">
right
</div>
</div>
<div style="clear:both">
</div>
Try this
CSS
div{width:33%;}
HTML
<div style="float: left;border:1px solid red;">
left
</div>
<div style="float: right;border:1px solid green;">
right
</div>
<div style="margin: 0 auto;border:1px solid blue;">
center
</div>
It's not possible actually do it, without knowing about the content and layout pattern. But for a begining point, you can try this:
HTML:
<div class="clearfix holder">
<div class="column left">
Some Contents Here...
</div>
<div class="column middle">
Some Contents Here...
</div>
<div class="column right">
Some Contents Here...
</div>
</div>
CSS:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.holder{
text-align:center;
}
.column{
display:inline-block;
*display:inline;
*zoom:1;
width:auto;
}
.left{
background-color:#ff0;
float:left;
}
.middle{
background-color:#f0f;
margin:0 auto;
}
.right{
background-color:#0ff;
float:right;
}
DEMO