I am having an issue with one of my Table's setup in my HTML. I have three header titles and for some reason they are not occupying the complete 100% width. However, the body does occupy the 100% width. I'm not quite sure what is going on. I have another table that works just fine. I have attached an image and the html code of the table. The display will still be the same as it is in the image below even if I remove the specified width percentages. Any help would be much appreciated! Thanks in advance!
<table id="timePreferenceTable" class="table-striped" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th width="34%">Start Time</th>
<th width="34%">End Time</th>
<th width="32%">Days</th>
</tr>
</thead>
<tbody></tbody>
</table>
Try to set width="100%" on your table. I am not sure what your class does. if it is not setting the width 100% then do it.
<table width="100%" id="timePreferenceTable" class="table-striped" cellpadding="0" cellspacing="0" border="0">
Related
I'm creating a table in html. Wanted the table to come out at the center of the screen, and found this question showing me exactly how to center the table in HTML.
However, as much as it did help make my table appear at the center of the screen, it also added an additional row, atop the first row when I added these lines to my code:
<table border="1px" align="center">
<td align=center valign=center>
Here's a preview of my current table (with slight distortions):
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<table border="1px" align="center">
<td align=center valign=center>
<col style="width: 200px" />
<col style="width: 300px" span="2" />
<tr>
<th scope="row">Degree</th>
<td colspan="2">Bachelor of Multimedia</td>
</tr>
<tr>
<th scope="row">University</th>
<td colspan="2">Universiti Utara Malaysia</td>
</tr>
<tr>
<th rowspan="2">Contact</th>
<th>Telephone</th>
<th>Email</th>
</tr>
<tr align="center">
<td>019-xxxxxxx</td>
<td>blah#gmail.com</td>
</tr>
</table>
</body>
You don't need the second line of code you added you jsut need
<table border="1px" align="center">
Remove
<td align=center valign=center>
FIDDLE
The best way to have a table centered in a page is using the margin:0 auto in your CSS. If you want to use it inline(not a recommendation), use it this way: style="margin:0 auto".
Try to use CSS property instead of border, align or valign.
But your real proble come from this line td align=center valign=center>. A td is a column that need to be in a tr(a row). But in fact, yo do not even need this line.
Hope this help!
Just remove the 2nd line of your code:
<td align=center valign=center>
and it should work, here is a fiddle
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
I know very little html and pretty much no css. I would like to know the easiest way for me to change my left aligned text to center aligned within the cells. Someone on stackoverflow helped me to figure out how to center a table on my wordpress page with the following code:
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<table border="0">
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I now need to figure out how to center the text within the cells. I have tried using align="center" beside the td. This showed the text centered in the wordpress admin area, but on the actual webpage, the text was still left aligned. Another guy recommended I put something in my header code and link it to the something. Again, I know very little about this and would appreciate the easiest solution. Thx.
Add the following CSS (CSS has to be added within <style> tags):
<style>
td {
vertical-align: middle;
text-align: center;
}
</style>
Also.. remove one of the <table> tags:
<table style="margin:0px auto;" border="0">
<table border="0">
should be
<table style="margin:0px auto;" border="0">
<td style="text-align:center"></td>
If you want every cell centered, the easiest solution for you is to add the above to every cell.
you dont need the div above or the style in the table tag, and only one table tag :)
<table>
<tr>
<td style="text-align:center">centered text</td>
</tr>
</table>
Here are two simple ways:
<td align="left">foo</td>
<td style="text-align:left;">foo</td>
EDIT
As others have mentioned, you also need to remove the nested <table> tags.
I built an HTML table:
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<thead>
<tr>
<th class="asc" width="30"><h3>ID</h3></th>
<th width="200"><h3>Name</h3></th>
<th width="200"><h3>Artist</h3></th>
<th width="150"><h3>Album</h3></th>
<th width="60"><h3>Time</h3></th>
</tr>
</thead>
<tr class="evenrw">
<td class="evensl" align="center">i++</td>
<td align="left">link name</td>
<td align="left">name</td>
<td align="left">name</td>
<td align="center">name</td>
<tr>
<table>
the problem is that when I put something in a row so that the whole table becomes bigger, Is there anyway to make the height of the cell bigger instead the width of the cell?
You have a table width set as 1000px, and individual table columns set to a total with of around 600px. Tables a bit confusing with widths so remove the style="1000px" and that should fix the problem
jsfiddle example
If the answer works, please mark it as the chosen answer :)
PART TWO
To add a banner above the table, simply add another <div> above the table. So it would be
<div id="banner_or_something">
<!-- INSERT BANNER CODE HERE-->
</div>
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<!--TABLE CODE HERE-->
</table>
Use CSS div & class with td tags will help you.
e.g.
.aaa td{
width:200px;
/* all attributes you want*/
}
i hope it will help you
Ok firstly apologies if you recognise some of my earlier posts today. I have a piece of HTML i wrote, which seemed the only way to do this.
Horizontal scroll which follows keeps the thead aligned with tbody as you move tbody.
Vertical scroll which still keeps the thead in view.
The only way i could do this was using two tables. This works and feel free to try it. However, i have a problem with the way in which the widths of columns are being determined by the size of the text inside them and not the width property i set. Can anyone help?
I simply want the width of a column to mean the width of a column
EDIT: the reason for the 1200 widths is because inside the overflow div the actual size is 8x 150px
<script type='text/javascript'>
function MatchScroll(SourceID, TargetID, DoIfMoz) {
if (DoIfMoz || navigator.userAgent.indexOf("Firefox") == -1) document.getElementById(TargetID).scrollLeft = document.getElementById(SourceID).scrollLeft;
}
</script>
<div id='HeaderTable' style='width:883px;overflow:auto;overflow-y:hidden;overflow-x:hidden;'>
<table border='1' id='HeaderTable' style='width:1200px;float:left;table-layout:fixed;'>
<thead style='text-align:left;'>
<tr style='display:block;margin-left:1px;'>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>tt</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>t</th>
<th width='150' style='width:150px;'>ttttt</th>
<th width='150' style='width:150px;'>ttttt</th>
<th width='150' style='width:150px;'>tt</th>
</tr>
</thead>
</table>
</div>
<div id='DataTable' style='height:300px;float:left;overflow:auto;overflow-x:auto;overflow-y:scroll;width:900px;' onmouseup="MatchScroll('DataTable','HeaderTable', true);" onmousemove="MatchScroll('DataTable','HeaderTable', false);" >
<table border='1' style='width:1200px;float:left;table-layout:fixed;'>
<tbody id='ClearDetails'>
<tr id='Row0' style='color:black;height:auto;display:block;'>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1111111111</td>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1</td>
<td style='width:150px;'>1</td>
</tr>
</tbody>
</table>
</div>
I don't know how big your whole project is, but there is a jquery dataTable plugin to solve this problem.
It has a lot of options for working with tables. I suggest that you use the "jquery.min" file if you just want to implement a few options.
In CSS width: x specifies the minimum width, so the browser might expand the column to fit text in the table body that exceeds it.