My tables stack on top of each other fine unless they get 100 or so rows, in which case they align side by side on IE 10. I need them to always stack. They're fine or Firefox and on some installations of IE 10. How to I make them always stack regardless of the browser?
<html>
<head>
<title>Test Project 1</title>
</head>
<body>
<h2 style="text-align: center;">
Test Project 1</h2>
<h3 style="text-align: center;">
2013-06-09 10:08</h3>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
RFI
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
<p>
</p>
<table float="left" clear="left" align="left" border="0" cellpadding="1" cellspacing="1" width="728" style="font-family:arial,helvetica,sans-serif;font-size: 12px;">
<tbody>
<tr>
<th scope="col">
CCO
<hr />
</th>
<th scope="col">
Description
<hr />
</th>
<th scope="col">
Rec'd
<hr />
</th>
<th scope="col">
Due
<hr />
</th>
<th scope="col">
Issued
<hr />
</th>
<th scope="col">
Age
<hr />
</th>
</tr>
</tbody>
</table>
</body>
</html>
Instead of that empty paragraph beween the tables you could try adding
<br style="clear:both"/>
As you are using float property. You need to break next element to new line ,use:
table {clear: both;}
or put a <br/> tag between tables.
Just remove the float="left" clear="left" attributes on the table tags and you will be fine. float and clear are not even valid properties of tables.
Add both the tables in a table
like
<Table id="main">
<tr>
<td>
<Table id=1> </table>
</td>
<td>
<Table id=2> </table>
</td>
</tr>
</table>
Related
I am getting space above my table when this html page is run by a particular browser:
<table>
<center>
<tr><th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x</th> <td width=1000>y
</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/16 - 12:59 AM: <br><br> z <br> z <br>z <br> z</th><td width=1000>y</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/10 - 12:34 AM: <br><br>z <br>z<br>z</th><td width=1000>y</td></tr>
<br><br><tr><td> </td></tr>
<tr><th width="150" scope="col">
5/8 - 4:47 PM: <br><br> z <br>z</th> <td width=1000> y</td></tr>
<br><br><tr><td> </td></tr>
</table>
How do I get rid of it?
This HTML is badly broken. You can't have tags or text inside your table but outside a TR. You have tags like CENTER and BR in that location. You should use a validator or a decent IDE, which would catch these problems.
With some formatting, your code is:
<table>
<center> <!-- THIS IS INVALID -->
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr>
<td> </td>
</tr>
<tr>
<th width="150" scope="col">
5/16 - 12:59 AM: <br><br> z <br> z <br>z <br> z
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr><td> </td></tr>
<tr>
<th width="150" scope="col">
5/10 - 12:34 AM: <br><br>z <br>z<br>z
</th>
<td width=1000>y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr><td> </td></tr>
<tr>
<th width="150" scope="col">
5/8 - 4:47 PM: <br><br> z <br>z
</th>
<td width=1000> y</td>
</tr>
<br><br><!-- THIS IS INVALID -->
<tr>
<td> </td>
</tr>
</table>
On top of that, your CENTER tag has no closing tag, and you really shouldn't be using CENTER, anyway.
You also have inconsistent numbers of child elements for your TRs; sometimes it's one, and sometimes it's two. This will cause inconsistent display unless you use a colspan="2" attribute on the lone children.
Your code is not well edited, you didn't close your <center> tag.
And to get rid of the extra spaces on top of your table, you should remove <br> tags between your <tr> elements
So instead of
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<br><br>
<tr>
<td> </td>
</tr>
You should have
<tr>
<th width="150" scope="col">
5/28 - 5:47 PM: <br><br> x <br> x
</th>
<td width=1000>y</td>
</tr>
<tr>
<td> </td>
</tr>
I do not understand why I couldn't insert a new line in this simple html code. I tried both the <p> tag and the <br> as well as the <h4>, etc. I know it must be a simple solution but I can't find it. The last sentence must be under the table. Here is the code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<h2>
<span style="color:#FF0000;">Summary</span>
</h2>
<h4></h4>
<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>56</td>
<td>3,69</td>
</tr>
<tr>
<td>B</td>
<td>153</td>
<td>10,09</td>
</tr>
<tr>
<td>C</td>
<td>349</td>
<td>23,02</td>
</tr>
<tr>
<td>D</td>
<td>393</td>
<td>25,92</td>
</tr>
<tr>
<td>E</td>
<td>565</td>
<td>37,27</td>
</tr>
<tr>
<td>
<b>SUM</b>
</td>
<td>
<b>1516</b>
</td>
<td>
<b>100</b>
</td>
</tr>
</tbody>
</table>
<p>I want Newline here!!</p>
</body>
</html>
Any suggestions?
Remove the attribute align="left" in the table tag
Have you tried adding a <br /> tag after <table>?
I hope this works for you.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html><body>
<h2><span style="color:#FF0000;">Summary</span></h2>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead><tr><th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th></tr></thead>
<tbody><tr><td>A</td><td>56</td><td>3,69</td></tr><tr>
<td>B</td><td>153</td><td>10,09</td></tr><tr>
<td>C</td><td>349</td><td>23,02</td></tr><tr>
<td>D</td><td>393</td><td>25,92</td></tr><tr>
<td>E</td><td>565</td><td>37,27</td></tr><tr>
<td><b>SUM</b></td><td><b>1516</b></td><td><b>100</b></td></tr></tbody></table>
<p>I want Newline here!!</p></body></html>
Here i removed the align='left' attribute from the table tag. Now the text is in next new line in end of table.
Hope this fixed your problem. If there is some other problem, then comment accordingly.
Use <div style="clear:both;height:1px;"><p>I want Newline here!!</p> </div> instead.
i have grid with some columns... i want to hide one column in that grid... how to do that...
here is my grid.... in this i need to hide CWDocId header from grid...
<div class="claro" id="CWPWORKLIST__2" name="dataGrid" onclick="setWidgetproperty(this.id,'xy','inner__CWPWORKLIST__2')" ondblclick="editDataGridResponseMapping(this.id)" onmouseup="setDocStyle(this.id)" style="height:250px; left:auto; position:absolute; top:333px; width:920px;">
<table class="claro" dojotype="dojox.grid.DataGrid" id="inner__CWPWORKLIST__2" rowselector="10px">
<thead>
<tr>
<th field="CWDocId" width="100px" style="display:none;">
CWDocId
</th>
<th field="Due" width="100px">
Due
</th>
<th field="Participant" width="100px">
Participant
</th>
<th field="User" width="100px">
User
</th>
<th field="Task" width="100px">
Task
</th>
<th field="Details" width="100px">
Details
</th>
<th field="Created" width="100px">
Created
</th>
<th field="Assigned" width="100px">
Assigned
</th>
<th field="Started" width="100px">
Started
</th>
</tr>
</thead>
</table>
<input id="hidden__CWPWORKLIST__2" name="orcl1.cw" style="display:none;" type="hidden" value="CWDocId##CWDOCID,Due##DUE_DATE,Participant##PARTICIPANT_TYPE,User##USER_ID,Task##OPERATION,Details##ORDER_VK,Created##CREATION_DATE,Assigned##ASSIGN_TO_USER_DATE,Started##START_WORK_DATE">
</div>
Have you thought of giving a column an ID and by using dojo.style method or CSS to set its visibility?
I am trying to layout a JavaScript Web Map using dojo components and would like to add splitters to my dojo Content Panes. I have the one between my left pane and center pane working but am unable to get the one between my center pane and footer to appear. The code below is the Content Pane footer I am trying to add a splitter to. I am sure I am missing something simple, does anyone have any advice?
Thanks in advance!!
<div data-dojo-type="dojox.layout.ContentPane" splitter="true" region="bottom" id="footerAll" style="height:60%; width:100%">
<div id="footerDocNum" class="roundedCorners" dojotype="dojox.layout.ContentPane" region="bottom" style="height:90%; width:96%;display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid1" id="grid1" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field='DOCUMENT_N' width='150px'>Document Number</th>
<th field='SURVEYOR' width='150px'>Surveyor</th>
<th field='TOWNSHIP_R' width='150px'>Township/Range</th>
<th field='SECTION' width='100px'>Section</th>
<th fields="page_id" formatter="makeLink3"width="100px" >
PDF
</th>
</thead>
</table>
</div>
<div id="footerCity" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid2" id="grid2" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field="CITY" width="200px" >
City
</th>
<th field="Square_Mil" width="150px" >
Square Miles
</th>
</tr>
</thead>
</table>
</div>
<div id="footerPoints" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid4" id="grid4" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<td> <tr>
<form name="griddataControl" id="gridDataFormControl" action="resultsControl.cfm" target="_blank" method="post" style="display:none"><input id="gridDataTextControl" name="gridDataTextControl" type="hidden"><input type="hidden"></form>
<button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataFormControl'].submit();">Export To Excel</button><b>Monument Results</b></tr></td>
<thead>
<tr>
<th field="POINT_NAME" width="150px" >
Point Name
</th>
<th field="GRID_ADDRE" width="150px" >
Address
</th>
<th field='TOWNSHIP_R' width='150px'>Township/Range</th>
<th field="SECTION" width="100px" >
Section
</th>
<th fields="POINT_NAME,LONGITUDE,LATITUDE" formatter="makeLink1" width="150px" >
Mon. Ref. Sheet
</th>
<th field="MON_NOTES" width="150px" >
Monument Notes
</th>
</tr>
</thead>
</table>
</div>
<div id="footersurvName" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style="height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid5" id="grid5" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<form name="griddata" id="gridDataForm" action="results.cfm" target="_blank" method="post" style="display:none"><input id="gridDataText" name="gridDataText" type="hidden"><input type="hidden"></form>
<tr><button dojoType="dijit.form.Button" value="Export Results" onclick="document.forms['gridDataForm'].submit();">Export To Excel</button><b>Survey Results</b></tr>
<thead>
<tr>
<th field="page_description" width="150px" >
Survey Number
</th>
<th field="SURVEYOR" width="150px" >
Surveyor
</th>
<th field="ADDRESS_OF_SURVEY" width="200px" >
Address
</th>
<th field='TOWNSHIP_RANGE' width='150px'>
Township/Range
</th>
<th field="SECTION" width="100px" >
Section
</th>
<th fields="subdir,page_id" formatter="makeLink" width="75px" >
PDF
</th>
</tr>
</thead>
</table>
</div>
<div id="footerSection" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom" style=" height:90%; width:96%; display:none;">
<table dojotype="dojox.grid.DataGrid" data-dojo-id="grid7" id="grid7" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
<thead>
<tr>
<th field='TOWN_RANGE' width='150px'>
Township/Range</th>
<th field="Section_Nu" width="150px" >
Section
</th>
</tr>
</thead>
</table>
</div>
</div>
So far, I'm doing this programmatically using VB.net/ASP.net:
<table cellspacing="0" cellpadding="4" border="0" style="border-
width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
</table>
<div style="width:100%;clear:both;text-align:left;margin:0;">
<div style="width:375px;float:left;margin:0;display:block;">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</div>
<div style="background-
color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>
This should give me four DIVS inside a container DIV. Here's what it's coming out as:
The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.
You can use instead of divs the colspan="[number]", for example:
<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
<td colspan="6">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</td>
<td colspan="3" style="background-color:#F0D3D3;"></td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td colspan="3" style="background-color:#BEE0F7;"></td>
</tr>
</table>
Hoped i helped you.. =)
Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.
Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).
Also, I'd suggest using a table instead if you're aiming to present tabular data.
Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from.
Or maybe border.
Can you include the table header?