How can I center the table within a div using html?
I have placed my content within a div tag and set the text-align attribute to center like the following.
text-align: center;
This has not worked.
Below is my html.
<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
Give width to table, and set margin auto horizontally.
table {
width:500px;
margin: 10px auto;
}
Try the below
<table style="margin:0px auto; width:500px">
<div style="text-align:center">
<table style="display: inline-table;">
</table>
</div>
Edit the table tag like below
<table border="1" align="center">
and then check.
<html>
<body>
<div style="text-align:center">
<p>
text test
</p>
<table border="1" style="margin: 0 auto;">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</div>
</body>
</html>
Instead of <div style="text-align:center"> you could write <div style="width:600px;margin:0 auto">
Which gives you a div with the width of 600 pixels and centers the div in the parent element.
Add margin: 0px auto to your table tag
you can put the style in the table
<table border="1" style="margin:0 auto;">
However I do suggest that you use a style sheet and not inline styles
Related
I am making a test site to practice Practice Page. I have set up a logo and a picture in the foundation framework for emails. The site is responsive now. The picture with the racoon there is a padding on 40px on the top and bottom. When I go down under 596px there is still the padding even if I tried to set the padding to 0px.
When I reach 596 px I need to padding to go to 0px, but why does that not work now? I can make it work setting a !important on media only screen. But that is bad coding behaviour, right?
There is a lot of CSS in the framework. Therefore I made a fiddle
Desktop CSS
.img-position {
padding:40px 0px 40px 0px;
}
Mobile CSS
#media only screen and (max-width: 596px) {
.img-position {
padding:0px 0px 0px 0px;
}
}
HTML
<body>
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!-- Logo Start -->
<table align="center" class="wrapper header float-center background-color__white">
<tbody>
<tr>
<td class="wrapper-inner">
<table align="center" class="container" style="background-color:transparent">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="img-headline">
<center>
<img src="http://www.fontmagic.com/files/animal-silence.gif" alt="TestPicture" align="center" class="float-center" width="250" height="80">
</center>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Logo End -->
<!-- Top Picture Start -->
<table class="row background-color__blue">
<tr>
<td class="center img-position" align="center">
<center>
<table class="container">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<img width="580" height="300" src="http://animalhumanhealth.com/wp-content/uploads/2016/07/racoon1.png">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<!-- Top Picture End -->
<!-- Row 1 End -->
<!-- Email Button End -->
</center>
</td>
</tr>
</table>
</body>
Add
.img-position {
padding:40px 0px 40px 0px;
}
above media queries which you have defined. Here is working fiddle working fiddle
The padding (or the space) that appears at 596px originates from the container class here:
table.body .container {
width: 95% !important;
}
So change the above to:
table.body .container {
width: 100% !important;
}
here's working example https://jsfiddle.net/sdk3dsyt/ your #media-query goes before you defined the initial paddings, that is why your #media-query rules are overriden
When more than 1 overlapping styles are applied to the same element, only the last style is visible https://developer.tizen.org/dev-guide/web/2.3.0/org.tizen.mobile.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
I have a HTML table in a <div>:
<div id="ticket_summary" style="height:60px;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2" bgcolor="#666666" align="left"><font color="#FFFFFF"><strong>Summary</strong></font></td>
<td bgcolor="#666666" align="right"><font color="#FFFFFF"><strong><?php echo $result["datetime"]; ?></strong></font></td>
</tr>
<tr>
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
</table>
</div>
I then have another table below:
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="showticketupdates"><a onclick="show_ticketupdates()"><h3>Show Ticket Updates</h3></a></div>
<div id="hideticketupdates" style="display:none;"><a onclick="hide_ticketupdates()"><h3>Hide Ticket Updates</h3></a></div></td>
</tr>
</table>
the ticket_summary <div> is displaying over the link below. I think it has something to do with the style on the <div> - what can i add to stop it doing this?
Firstly, write this:
<div id="ticket_summary">
in place of:
<div id="ticket_summary" style="height:60px;">
Then, write this:
<td colspan="3"><div style="overflow-y: scroll; height: 60px;"><?php echo nl2br(stripslashes($result["summary"])) ;?></div></td>
in place of:
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
Instead of height, try making it to min-height, so:
<div id="ticket_summary" style="min-height:60px;">
Therefore it will extend when the length of ticket_summary div exceeds 60px.
Also try putting your second table in a div.
EDIT:
If you want to have a fixed height and just show a scroll bar when it exceeds your desired height, then just keep the height and add an overflow: scroll; to your ticker summary div:
<div id="ticket_summary" style="height:60px; overflow:scroll;">
Also, I noticed that you put an hr at the end of the table. But this will not be displayed if there's an overflow so I suggest that you just move the <hr /> at the end of the first table.
See this fiddle: http://jsfiddle.net/AmqRJ/
how do you center align a table in the middle of the page using css. This is what I have http://jsfiddle.net/m5uEr/
<div style="text-align: center; border-style:solid;">
<table style="border-style:solid;">
<tr>
<td>test</td>
</tr>
</table>
</div>
table.center {
margin-left:auto;
margin-right:auto;
}
<table style="border-style:solid;" class="center">
<tr>
<td>test</td>
</tr>
</table>
Your updated fiddle
Google found it for me with this text: "center align table css"
Set a width on your table and set
margin:auto
css wasn't working so I did a <table align="center">
this is on IE8
Did you put margin-left:auto, margin-right:auto in the properties of the div?
That is easy to do.
Those properties should belong in table
<div style="text-align: center; border-style:solid;">
<table style="border-style:solid; margin-left:auto; margin-right:auto; ">
<tr>
<td>tdddest</td>
</tr>
</table>
</div>
Given the following html table, I would like to control the width of the first column by setting the width of the 'col' element instead of setting it on the div element, without losing the ellipsis. Is that possible with just using html and CSS?
<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<col /><!-- ** set width here ** -->
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>
<div class="hideextra" style="width:200px">
this is the text in column one which wraps</div></td>
<td>
<div class="hideextra" style="width:100px">
this is the column two test</div></td>
</tr>
</table>
</body>
</html>
it can be done like this:
<table border="1" width="100%" style="table-layout: fixed; ">
<col width="60px">
<tr>
<td style="overflow: hidden;text-overflow: ellipsis;">500.000.000.000.000</td>
<td>10.000</td>
</tr>
<tr>
<td>1.500.000</td>
<td>2.000</td>
</tr>
</table>
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
I wanna see a scroll bar within the table.
Source:
http://nopaste.info/e51385254e.html
and here:
<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<body>
</html>
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto or scroll.
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
that should work
Try this on div part
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
Wrap your table with a div, which will have the same width with your container and overflow:scroll
Example: http://jsbin.com/uheha4