I want to get the Name and Description in the center of the columns..
I tried a lot but no luck... I know this is silly doubt but I am stuck...
Here is the .aspx code:
<!-- <table cellpadding="3" cellspacing="4" align="center"
style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%" align="center" >
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%">
Description</td>
</tr>
as you can see I have also tried align.. it still does not work.
Try using the text-align CSS property:
<table cellpadding="3" cellspacing="4" align="center" style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:center">
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:50%">
Description</td>
</tr>
In what way is it not working?
What you have done should be displaying 'Name' centered, if not then it's possibly being affected by your css and the inline style approach SLaks has shown will fix it.
If your problem is that you want all text in those columns to be centered then try.
<table>
<col align="center" />
<col align="center" />
<tr>
Related
My xhtml code is
<p:outputPanel id="topperchartcont">
<p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}">
<table style="width: 100%">
<tr>
<td style="width: 10%">
</td>
<td style="width: 80%; text-align:center">
<h:panelGrid column="1">
<h:panelGroup style="width:80%; display:block; text-align:center">
<table style="border:1px solid #D8D8D8">
<tr>
<td style="text-align:center">
<p:chart type="bar" model="#{performanceStaffController.topperChartModel}"
rendered="#{performanceStaffController.topperChartModel != null}"
style="#{performanceStaffController.perfBean.chartWidth}"/>
</td>
</tr>
</table>
</h:panelGroup>
</h:panelGrid>
</td>
<td style="width: 10%">
</td>
</tr>
</table>
</p:outputPanel>
</p:outputPanel>
I also tried without the PanelGrid/PanelGroup
<p:outputPanel id="topperchartcont">
<p:outputPanel rendered="#{performanceStaffController.reportType == 'TP'}">
<table style="width: 100%">
<tr>
<td style="width: 10%">
</td>
<td style="width: 80%; text-align:center">
<table style="border:1px solid #D8D8D8">
<tr>
<td style="text-align:center">
<p:chart type="bar" model="#{performanceStaffController.topperChartModel}"
rendered="#{performanceStaffController.topperChartModel != null}"
style="#{performanceStaffController.perfBean.chartWidth}"/>
</td>
</tr>
</table>
</td>
<td style="width: 10%">
</td>
</tr>
</table>
</p:outputPanel>
</p:outputPanel>
I even tried other options like using div etc. but I am no way able to center align the p:chart inside that table-data, it is always left aligned. Please suggest how to center align it.
Note that there is no other problem with any of the components and the chart renders perfectly.
Try .center-block to make <p:chart> element's position center and .text-center to make inside text/elements center if any.
.center-block {
display:block;
margin-right:auto;
margin-left:auto;
}
.text-center {text-align:center}
I have 3 tables, cascading one after the other. I have a div, that I want to place on right side of these tables. The height of div may vary according to text inside. Currently the div is displayed below tables, like the image below;
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
<div class="mydiv">mydiv</div>
But I want to place the div next to tables, so that it can extend downwards.
Here is the working fiddle http://jsfiddle.net/ZHVuf/1/
You should add a container around you table like this :
Html
<div id="container">
<!-- Your table -->
</div>
And make him float left, like your div #myDiv
Css
#container {
float:left;
}
see updated fiddle.
On this second updated fiddle, I added a wrapper with a clearfix !
insertusernamehere commented that you could use overflow:hidden instead of the clearfix, see here for a new working way to do this with less code.
Apply float:left; to all the table and add clear:both; to second and third table.
now you already has float:left; for div just add position:relative;top:0; and see.
OR
create two divs and add tables in one with left floating and you already have second div.
<div class="tableContainerDiv" style="float:left;">
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
<table><tr><td></td></tr></table>
</div>
<div class="yourDiv" style="float:left;"></div>
html
<div class="cl">
<div style="float: left">
your tables
</div>
<div class="mydiv" style="float: left">mydiv</div>
</div>
css
.cl:after{ content: " "; display: block; height: 0px; clear: both; visibility: hidden;}
.cl {display: inline-block;}
/* Hides from IE-mac \\*/
* html .cl {height: 1%;}
.cl {display: block;}
/* End hide from IE-mac */
move tables inside another div , float to left;
HTML
<div class="table-wrap">
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</div>
<div class="mydiv">mydiv</div>
CSS
.class1{
width: 100px;
height: 100px;
background: orange;
}
.class2{
width: 100px;
height: 100px;
background: green;
}
.class3{
width: 100px;
height: 100px;
background: gray;
}
.mydiv{
width: 200px;
background: blue;
float: left
}
.table-wrap{float:left;}
<table>
<tr><td>
<table class="class1" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell1</td>
<td class="cell2">Cell2</td>
</tr>
<tr>
<td class="cell1">Cell3</td>
<td class="cell2">Cell4</td>
</tr>
</table>enter code here
<table class="class2" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell5</td>
<td class="cell2">Cell6</td>
</tr>
<tr>
<td class="cell1">Cell7</td>
<td class="cell2">Cell8</td>
</tr>
</table>
<table class="class3" cellpadding="0" cellspacing="0" style="margin-top: 0px;">
<tr>
<td class="cell1">Cell9</td>
<td class="cell2">Cell10</td>
</tr>
<tr>
<td class="cell1">Cell11</td>
<td class="cell2">Cell12</td>
</tr>
</table>
</td>
<td>
<div class="mydiv">mydiv</div>
</td>
</tr>
</table>
img {
max-width: 100%;
this is breaking content namely the images shrink down in my bootstrap based template - I cant get a reason why this is.
content is a table with rows and some icon images such as
<table>
<tr class="sectiontableentry2 even" id="tree_row_26">
<td align="center" valign="middle" width="20">4</td>
<td id="jlms_step_26" valign="middle" width="20"><img alt="accept" border=
"0" class="JLMS_png" height="16" src="../lms_images/toolbar/btn_accept.png"
width="16"></td>
<td align="center" valign="middle" width="16">
<div style="text-align: center; vertical-align: middle">
<span style="text-align:center;"><img alt="content" border="0" class=
"JLMS_png" height="16" src=
"http://demo1.bwood1.wok.catn.com/components/com_joomla_lms/lms_images/files/file_content.png"
width="16"></span>
</div>
</td>
<td align="left" colspan="1" valign="middle" width="100%"><a href=
"javascript:seek_step_id=26;ajax_action('lpath_seek');">Automation
criteria</a></td>
</tr>
</table>
The width of all your rows together is more than the width of the table.
Only set the width of the table and of the columns with a fixed width.
<table style="width: 100%">
<tr class="sectiontableentry2 even" id="tree_row_26">
<td align="center" valign="middle" width="20">4</td>
<td id="jlms_step_26" valign="middle" width="20"><img alt="accept" border=
"0" class="JLMS_png" height="16" src="../lms_images/toolbar/btn_accept.png"
width="16"></td>
<td align="center" valign="middle" width="16">
<div style="text-align: center; vertical-align: middle">
<span style="text-align:center;"><img alt="content" border="0" class=
"JLMS_png" height="16" src=
"http://demo1.bwood1.wok.catn.com/components/com_joomla_lms/lms_images/files/file_content.png"
width="16"></span>
</div>
</td>
<td align="left" colspan="1" valign="middle"><a href=
"javascript:seek_step_id=26;ajax_action('lpath_seek');">Automation
criteria</a></td>
</tr>
</table>
http://jsfiddle.net/LqVyu/
Next time, please ask as 'why is this happening' or 'what am I doing wrong' to prevent getting down voted. Because the question on itself is valid.
A good fix from #_pier is:
table td img {
display: block;
width: 100%;
}
I'm trying to align some text on table cells with a PNG Transparent background, I uses the filter:progid:DXImageTransform.Microsoft.AlphaImageLoader() to fix this in IE6. But the text does not align to the middle with the style filter:
CSS:
.fh {
font-family:SimSun;
font-size:12px;
overflow:hidden;
padding:0 2px 2px;
text-align:left;
vertical-align:middle;
}
HTML:
<table width="200" border="1" cellpadding="2" class="x-table">
<tr>
<th scope="col"> </th>
</tr>
<tr style="height: 77px;">
<td class="fh" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png')"> ABCDEFG</td>
</tr>
</table>
Screenshot:
"vertical_align_ie6" http://filer.blogbus.com/4216262/resource_4216262_1279530625v.png
Try shifting the height to the TD or the TABLE.
I find that this problem can be fixed by insert a div with a table in it to the origin td:
HTML:
<table cellspacing="0" cellpadding="0" class="x-table" style="position: absolute; width: 289px; left: 0px;">
<colgroup>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
<col style="width: 72px;"/>
</colgroup>
<tbody>
<tr style="height: 77px;">
<td class="brw1 brss bbw1 bbss blw1 blss btw1 btss" style="border-color: rgb(153, 204, 255); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./shadow-trans.png', sizingMethod=crop);background-repeat: no-repeat;" id="A1-0" colspan="4">
<div class="fx" style="height: 76px;">
<table>
<tbody>
<tr>
<td class="fh bw" style="height: 76px; width: 288px;">ABCDEFG</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
All,
This xpath locator works fine in Firefox:
ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
This does not work in IE. I have been trying to convert to CSS locator
without success. The item I am trying to select is Seller. Here's the
whole blob:
<div style="width: 168px; overflow: auto; height: 107px; padding-right: 0px;" class="dxlbd" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_D">
<input type="hidden" name="ctl00$ctl00$mainPage$rightColumn$wholeControl$grid$cell2_3$roleX$DDD$L" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_VI" value="0">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: separate;" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBT">
<tbody>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemSelected" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI0T0">Choose</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI1T0">Buyer</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemHover" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0">Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI3T0">Buyer & Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI4T0">Observer</td>
</tr>
</tbody>
</table>
</div>
Any ideas greatly appreciated.
Blake
There are a few ways that you could locate the seller cell. To locate it using CSS based on the content of the cell try:
css=td:contains(Seller)
If the id is static then the following should also work, however the id is unusually long, which could conceivably cause issues. I haven't tested this myself.
id=ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0