Sorry to beat a dead horse, but I need some advice on centering the contexts inside a div tag. I have a div tag with a table inside it (the div with the context class). I have an align attribute on it and it produces the results I want, but I would like to do this properly with css. If I set the div's 'text-align' to 'center', that propagates down into the table cells, which is not what I want. So... how do I center the div's contents without affecting the table cells? Here is a fiddle for this code.
<style type="text/css">
* { font-family: Arial; font-size: 12px; }
.container { padding-bottom: 10px; }
.content { background-color: #EEEEEE; }
</style>
<div class="container">
<div>Demo</div>
<div class="content" align="center">
<table>
<tbody>
<tr>
<td>Item 1</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 2</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 3</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 4</td>
<td style="padding-left: 10px;">remove</td>
</tr>
<tr>
<td>Item 5</td>
<td style="padding-left: 10px;">remove</td>
</tr>
</tbody>
</table>
</div>
</div>
Instead of the align attribute, do this:
table { margin: 0 auto; }
Live demo: http://jsfiddle.net/V9JRP/1/
Of course, you may want to use an ID or class selector to select the table...
The rule is this: If the element is a block-level element, and you want to center it, set margin:0 auto; on it. This may require the width of that element to be set explicitly.
div.content table {
margin: 0 auto;
}
table {width:100px;margin:0 auto;}
That should set you right, just specify the width you are after.
Related
If I have a fixed length text then I can easily center it for example
However, lets say there are data with variable length,
Centering the content of Nickname will affect readability. Is there a way to pad the content and centering it base on the longest length?
<td>
<div style="padding-left: 30%;">
...content
</div>
</td>
The value "30%" is just rough estimate for nickname.
However this 30 percent will changed if the column is expecting a longer data. What is a good way to programatically determine this value that I put as "30" ?
Update, centering text is not what I am looking for. I want to center text AND left align, centering text alone will give me
Visual representation of what I want
You need javascript to determine the width of the content and the table data width.
var td = document.querySelectorAll('td > div');
var width = 0;
var clientWidth = 0;
// determine the width
[].forEach.call(td, function(e) {
clientWidth = e.parentNode.clientWidth; // the width is the same for all td's
if (e.clientWidth > width) {
width = e.clientWidth;
}
});
// set the padding
[].forEach.call(td, function(e) {
e.style.paddingLeft = (clientWidth - width) / 2 + 'px';
e.style.paddingRight = (clientWidth - width) / 2 + 'px';
});
table {
border-collapse: collapse;
}
th {
text-align: center;
}
th, td {
border: 1px solid #000;
}
td > div {
display: inline-block; /* set this because we want to calculate the width, block element has 100% */
padding: 10px 0;
}
<table style="width: 50%">
<tr>
<th>Nickname</th>
</tr>
<tr>
<td><div>Data 1 Data 1Data 1Data 1</div></td>
</tr>
<tr>
<td><div>Data 2</div></td>
</tr>
<tr>
<td><div>Data 3</div></td>
</tr>
<tr>
<td><div>Data 4</div></td>
</tr>
<tr>
<td><div>Data 5</div></td>
</tr>
<tr>
<td><div>Data 6</div></td>
</tr>
<tr>
<td><div>Data 7</div></td>
</tr>
<tr>
<td><div>Data 8</div></td>
</tr>
</table>
Change the hardcoded table width to see the effect.
you can try by mentioning pixels size
<td>
<div style="padding-left: 30px;">
...content
</div>
</td>
Try this,
td{
padding:5px;
text-align:center;
}
so to make it responsive you should use bootstrap 3
try this you will definitely get your answer
bootstrap tables
and there classes
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
Update
Technically this answer is correct but we are unable to see it visually so according to me the best way to do this is to add same left and right padding to both <th> and <td> and remove text-align:center from <th>. This is just my opinion. We will wait and see what others think about it. :)
Instead of adding padding to one side you need to add it both the sides.
table tr td{
padding:5px 15%;
}
I have created a simple example.
table{
width:200px;
}
table tr th{
background:#ccc;
text-align:left;
padding:5px 15%;
}
table tr td{
padding:5px 15%;
background:#eee;
}
<table>
<tr>
<th>Nickname</th>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>Big Name</td>
</tr>
<tr>
<td>A Very Big Name</td>
</tr>
<tr>
<td>This is a very big name</td>
</tr>
</table>
#container {
width: 960px;
height: 960px;
background-color: #ccc;
}
.box {
width: 300px;
height: 300px;
background-color: blue;
display: table-caption;
border: 0;
}
<div id='container'>
<span class='box'>Content</span>
<span class='box'>Content</span>
<span class='box'>Content</span>
<span class='box'>Content</span>
</div>
Table Caption Fiddle Demo
Now when I change table-caption to table-cell it renders horizontally. Below is the demo of it.
Table Cell Fiddle Demo
Any reason for the different renderings?
Here is what the spec says about display: table-caption:
table-caption (In HTML: CAPTION)
Specifies a caption for the table. All elements with 'display: table-caption' must be rendered, as described in section 17.4.
And here is what the section 17.4 says about rendering of caption boxes:
The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.
The key part is that they are rendered as normal block boxes and hence each of them is displayed one below the other (as in, in their own row).
Other points to note: (A summary of my discussion with GCyrillus in comments)
Parent container with display: table is not required for a child to have display: table-cell or display: table-caption. You can find more details and reference to the relevant part of the spec in this SO thread
There should ideally be only one caption per table. User Agents probably don't expect multiple captions to be provided under the same parent/table and it probably explains why Firefox renders it differently from Chrome. But details on that are beyond the scope of this answer (in my opinion) as the question only asks why display: table-caption causes vertical layout.
I concur with GCyrillus, it is definitely bad practice to use display: table-caption on multiple elements under the same parent. I believe you were doing trial and error in an attempt to learn.
.header{
writing-mode: vertical-rl;
padding-top: 30%;
font-weight: bold;
padding-right: 5px
}
table,tr,td{
border:1px solid black;
border-collapse: collapse;
padding: 5px;
}
<h1>Right Caption </h1>
<table>
<tr>
<td>
<table>
<tr> <th>SrNo.</th> <th>Name</th> <th>Department</th> </tr>
<tr>
<td>1</td>
<td>Natasha</td>
<td>IT</td>
</tr>
<tr>
<td>1</td>
<td>Umar</td>
<td>IT</td>
</tr>
<tr>
<td>1</td>
<td>Usman</td>
<td>BBA</td>
</tr>
<tr>
<td>1</td>
<td>Warda</td>
<td>BBA</td>
</tr>
</table>
</td>
<td rowspan="5" ><span class="header">Student Data</span> </td>
</tr>
</table>
<h1>Left Caption </h1>
<table>
<tr>
<td rowspan="5" ><span class="header">Student Data</span> </td>
<td>
<table>
<tr> <th>SrNo.</th> <th>Name</th> <th>Department</th> </tr>
<tr>
<td>1</td>
<td>Natasha</td>
<td>IT</td>
</tr>
<tr>
<td>1</td>
<td>Umar</td>
<td>IT</td>
</tr>
<tr>
<td>1</td>
<td>Usman</td>
<td>BBA</td>
</tr>
<tr>
<td>1</td>
<td>Warda</td>
<td>BBA</td>
</tr>
</table>
</td>
</tr>
</table>
I have two tables and one image and I want them to be in one line while using the float attribute.
How can I prevent the image and the right table to jump below the other elements when making the browser window smaller?
before
after
<body>
<div>
<table class="datagrid">
<tr>
<th colspan="2">Test table one</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<table class="datagrid">
<tr>
<th colspan="2">Test table two</th>
</tr>
<tr>
<td class="label">Test 1:</td>
<td class="value">Text 1</td>
</tr>
<tr>
<td class="label">Test 2:</td>
<td class="value">Text 2</td>
</tr>
<tr>
<td class="label">Test 3:</td>
<td class="value">Text 3</td>
</tr>
<tr>
<td class="label">Test 4:</td>
<td class="value">Text 4</td>
</tr>
</table>
<img style="float: left; height: 200px;" src="data:image/png;base64,..."/>
</div>
</body>
table.datagrid tr th
{
text-align: left;
padding: 5px 5px;
background: #ebebeb;
}
table.datagrid
{
float: left;
width: 30%;
margin-right: 15px;
}
You can create a responsive layout and set the width of each block to, say, 33%, leaving some room (1%) for the margines.
First of all, I would wrap the image in a div wrapper
<div class="imagery"><img src=""/></div>
Style the image wrapper
.imagery {
float: left;
width: 33%;}
And make sure the image scales appropriately:
.imagery img {
max-width: 100%;
height: auto;
display: block;
}
Then I would set the tables width to 33% and 1% for the margines
.datagrid {
float: left;
width: 33%;
margin-right: 0.5%;}
http://jsfiddle.net/ny86yjm4/
First of all, name your <div> after your <body>. Then, set a min-width rule to that div.
Then, you just set the 2 tables and the image to float to the left.
Let's call your div 'content' for brevity. You also have to give an id to your img element, we'll call this x-img.
HTML:
<body>
<div id="content">
...
<img id="x-img" ... >
</div>
</body>
CSS:
div#content{
min-width: 50em; /* Or whichever, this value is going to be trial and error, you can also use px */
}
table.datagrid, img#x-img{
display: inline;
float: left;
clear: none;
}
Otherwise, you can mess with other values; CSS is a lot of trial and error.
I have two tables floated side by side in a parent div. The leftmost table has a margin-right of 10%. As you can see in the image, the margin is calculated correctly (in this case, the parent is 850px, and the metrics inspector shows an 85px margin) but when drawn, is incorrect (much smaller.)
Resizing the window to make it redraw immediately fixes it. What is going on here!?
HTML:
<table id="subscriptions" class="data">
<tr>
<th colspan="2">Subscriptions
<span id="remaining">Remaining</span></th>
<th></th>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
<tr>
<td>Spin Classes</td>
<td class="right">3</td>
<td class="right">Redeem</td>
</tr>
</table>
<table id="redeemed" class="data">
<tr>
<th>Redeemed Items</th>
<th class="right">Redeemed</th>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
<tr>
<td>Spin Class</td>
<td class="right">3/3/13</td>
</tr>
</table>
CSS:
#subscriptions, #redeemed {
width: 45%;
float: left;
clear: both;
margin: 25px 10% 0 0;
}
#redeemed {
clear: none;
margin-right: 0;
}
I think if you get rid of both the clear lines in the css it might fix it?
I have a table with 2 <tr> and 2 <td>:
<table>
<tr>
<td>
<table>
<!-- other content -->
</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Where the ***** is I need to insert pretty much the same table (which does not contain another table).
but when I debug it the table is left aligned.
Live Example
I want that the table in the upper left box is right aligned (for knowledge: and center aligned).
For example:
The table within is 32px width but the containing td is 64px width.
How can I align the table to the right?
A table is a block-element; text-align and align only works on inline-elements.
So for a block-element you have to use margin:
CSS:
.centered{
margin: 0 auto;
}
.rightaligned{
margin-right: 0;
margin-left: auto;
}
.leftaligned{
margin-left: 0;
margin-right: auto;
}
HTML:
<td>
<table class="leftaligned">
<!-- Other Content -->
</table>
<table class="centered">
<!-- Other Content -->
</table>
<table class="rightaligned">
<!-- Other Content -->
</table>
</td>
This will work in almost every browser, even Internet Explorer 7.
Only the following comes to mind:
<table>
<tr>
<td style="text-align: right"></td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
Or another css approach:
table table {
float: right;
}
or inline with float:
<table>
<tr>
<td>
<table style="float: right;">.....</table>
</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>
In case the td only contains table and no other text or element then below code should also work, only thing it will right align everything in the td and won't work in html5:
<table>
<tr>
<td align="right">*</td>
<td/>
</tr>
<tr>
<td/><td/>
</tr>
</table>