As seen in the attached, some results paragraphs do not "conform" to what seems to be the "standard" specification for width (visible from results paragraph at top of image.
How can we control (limit) the overall width of the table to prevent the oversize table that was generated for "productdata.js" ?
Also, the left-side box with icon and "fit" factor is specified in the header with width = 100px, but the oversize table/paragraph seems to have overriden this and reduced the width to the width of the icon plus margin. Is there any way to prevent that from happening ?
The current contents of the paragraph CSS is:
<table style="background-color: #AFAFAF; width: 850px;"
<!-- <table class="parspec" style="background-color: #AFAFAF;" -->
border-style="none" border-color:="" border="0">
<tbody>
<tr>
<td style="width: 100px; text-align: center;
background-color: #0F0F0F;"
rowspan="4" >
<a class="thumbnail" href="#">
<img src="%I" width="64px" height="auto"> <!-- set width of thumbnail -->
<span>
<img src="%U">
</span>
</a>
<p style="font-family: sans-serif; color: #4F9F4F;"><b>%R</b></p>
</td>
<td style="vertical-align: top;"><br>
<th
style="font-family: sans-serif; color: #DFDFDF;
background-color: #000000; text-align: left;"
colspan="3" >
%T</th>
</td>
</tr>
<tr>
<td style="vertical-align: top; "></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%M</font></b></td>
<td style="font-family: sans-serif; text-align: center;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%D</font></b></td>
<td style="font-family: sans-serif; text-align: right;
background-color: #000000; color: #CFCF4F;">
<b><font size=2>%S</font></b></td>
</tr>
<tr style="font-family: sans-serif;" 8="">
<td style="vertical-align: top; "></td>
<td class="snippet" colspan="3">
%A</td>
</tr>
<tr style="font-family: sans-serif; color: #9F;">
<td style="vertical-align: top; "></td>
<td style="background-color: #000000; color: #BFBFEF;"
colspan="3">
<b><font size=2>%U</font></b><br>
<span style="color: #BFBFFF">%L </span></td>
</tr>
</tbody>
</table>
<br>
<br>
The current contents of the header CSS is:
<style type="text/css">
body {
width: 1000px;
color: #CFCFCF;
background-color: #1F1F1F;
}
a:link {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: green;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: underline;
}
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
.snippet{
background-color: #000000;
color: #AFAFDF;
}
.thumbnail {
display:block;
position:relative;
padding: 4px;
width: auto; /* set width of thumbnail image in 'paragraph' code - not here */
border:none;
z-index:0;
}
.thumbnail:hover {
border:none;
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
left: -9999px;
visibility: hidden;
}
.thumbnail span img {
max-width:256px; /* set 'large image' max width/height - advise keeping these */
max-height:256px; /* the same to avoid inadvertently changing the aspect ratio */
width:auto; /* leave set to auto */
height:auto; /* leave set to auto */
background-color: gray;
padding: 1px;
border: 1px solid black;
}
.thumbnail:hover span {
visibility: visible;
top: 4px; /* top/left positions 'large image' relative to top left */
left: 88px; /* of parent thumbnail (plus padding) */
}
</style>
After discussions with the developer for recoll, it has been determined that the problem was not with the customizations that I was attempting to apply.
The root of the problem was in fact a bug in the recoll code.
Related
I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
.em_black a {
text-decoration: none;
color: #000000;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_blue a {
text-decoration: none;
color: #0a75b1;
}
.em_grey a {
text-decoration: none;
color: #4d4d4d;
}
.em_g_img + div {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 667px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
height: 150px !important
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_w300 {
width: 320px !important;
}
.em_w280 {
width: 320px !important;
}
.em_font_18 {
font-size: 27px !important;
line-height: 31px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_side_10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_font_18 {
font-size: 18px !important;
line-height: 23px !important;
}
.em_w300 {
width: 300px !important;
}
/* update the N number as per width */
.em_w280 {
width: 300px !important;
}
.em_w146 {
width: 146px !important;
}
.em_aside25 {
padding: 0px 25px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
A sample of my code is below:
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.
I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.
So we have a list of things, order doesn't matter so lets use an unordered list (ul).
You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.
To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.
.presenters {
list-style: none;
padding: 0;
}
.presenter {
display: inline-block;
margin-right: 10px;
width: 158px;
background-color: #4D4D4D;
color: #FFF;
border-radius: 0 0 5px 5px;
vertical-align: top;
overflow: hidden;
}
.presenter-imgContainer {
background-color: #FFF;
border: solid 2px #9e9f9f;
}
.presenter-img {
display: block;
width: 155px;
}
.presenter-title {
background-color: #9E9F9F;
font-size: 16px;
font-weight: 400;
text-align: center;
width: 155px;
margin: 0;
}
.presenter-content {
/*Set a sensible fixed height*/
height: 80px;
/*Give enough room in the bottom padding
For the action element
*/
padding: 8px 10px 70px;
/*We want to postion the action element
relative to this
*/
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
}
.presenter-name {
font-weight: bold;
}
.presenter-action {
background-color: #007F3D;
display: block;
padding: 10px 5px;
text-decoration: none;
color: white;
border-radius: 5px;
/*Postion the button at the bottom*/
position: absolute;
bottom: 10px;
width: calc(100% - 30px);
}
<ul class="presenters">
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 2</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Dennis Salmon</div>
<div class="presenter-desc">UCLA Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 3</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Joyce O’Shaughnessy</div>
<div class="presenter-desc">Baylor University Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
</ul>
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>
I have a table with 3 columns. I'd like to remove the border/cellspacing between the first and second columns, and make it appear like one column.
Fiddle: https://jsfiddle.net/o8x3ego0/1/
HTML
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
In the above example, I'd like to remove the spacing between the 1st and 2nd columns in the data rows.
You can remove the border from the entire table by:
table {
border-collapse: collapse;
}
Then to add borders to the rows, table headers and the last table cells (or whatever table cells necessary by using :nth-child):
tr, th, td:last-child {
border: 1px solid black; /* changed to black to be more noticeable */
}
Then remove padding from the table header and table cells:
th, td {
padding: 0;
}
Here is the updated fiddle.
edit: it was col and not row, so i believe this is more like this : https://jsfiddle.net/o8x3ego0/6/ (same method, but padding to draw the hole in between th )
you can use
border-collapse to remove cellspacing and to allow style tr borders
a line-height to th instead padding
draw a transparent border at bottom of th (padding works too)
and erase bg color with background-clip to mimic the border-spacing only where you want to
body {
background-color: white;
}
/* demo */
tr:nth-child(1) th {
border-bottom: 3px solid transparent;
background-clip: content-box
}
table {
border-collapse: collapse;
}
/* end */
.table {
margin-bottom: 20px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.currencyHolder {
padding: 7px;
border-radius: 5px;
border-width: 2px;
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
max-width: 36px;
text-align: center;
}
.currency {
border-radius: 5px;
color: white;
font-size: 11px;
font-weight: bold;
}
.greenCurrencyHolder {
background-color: green;
border-color: darkgreen;
}
.greenCurrency {
background-color: darkgreen;
}
.blueCurrencyHolder {
background-color: azure;
border-color: cadetblue;
}
.blueCurrency {
background-color: cadetblue;
}
#holdingsDistributionTable {
display: table;
/*width: 100% !important;*/
}
#holdingsDistributionTable th {
background-color: #F4F5F6;
color: #AAABAE;
line-height: 2.5em;
/* instead vertical padding */
width: 25%;
font-weight: normal;
}
#holdingsDistributionTable th:last-child,
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: #A19D9E;
}
#holdingsDistributionTable td:last-child {
background-color: #DFE1E3;
color: black;
}
#holdingsDistributionTable th,
#holdingsDistributionTable td {
min-height: 15px;
background-color: #F4F5F6;
}
<table id="holdingsDistributionTable" class="table table-responsive">
<tr>
<th colspan="2">Currency</th>
<th>Value</th>
</tr>
<tr>
<td>
<div class="currencyHolder greenCurrencyHolder">
<div class="currency greenCurrency">
AED
</div>
</div>
</td>
<td>
<div style="text-align: center">
UA Emirates Dirham
</div>
</td>
<td>
<b>345</b>
</td>
</tr>
<tr>
<td>
<div class="currencyHolder blueCurrencyHolder">
<div class="currency blueCurrency">
ARS
</div>
</div>
</td>
<td>
<div style="text-align: center">
Argentine Peso
</div>
</td>
<td>45345</td>
</tr>
</table>
The best solution would be to make your table only two columns in the first place and do not use colspan="2" then make the stylized currency abbreviation line up with the currency name by setting the two div in each column inline block items using display: inline-block; in your CSS
Fiddle: https://jsfiddle.net/f30tujzn/
this solution is not only easier then removing part of your border but will render faster, and respond better on smaller devices.
I can not get my home button image directly to the left of my logout button. I have changing the css all over. I also tried adding breaks and extra lines but that always gives an unexpected result. This is my HTML code.
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a">
<h1>Add a New Subdiv file <a href="/main" class="HomeButton">
<img src="../../../../Pictures/dwelling1.png" height="50"/></a>
Logout </h1></td></tr>
This is my css code.
.HomeButton {
text-decoration:none;
float:right;
display:inline-block;
}
.LogoutButton {
text-align:center;
width: 10%;
float:right;
background-color:#ffec64;
border:2px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:Arial;
font-size:22px;
font-weight:bold;
padding:.01% .1%;
text-decoration:none;
}
Change the order of anchor tags in the html.
try
<h1>Add a New Subdiv file
Logout
<a href="/main" class="HomeButton">
<img src="../../../../Pictures/dwelling1.png" height="50"/>
</a>
</h1>
Snippet:
.HomeButton {
text-decoration: none;
float: right;
display: inline-block;
}
.LogoutButton {
text-align: center;
width: 10%;
float: right;
background-color: #ffec64;
border: 2px solid #ffaa22;
display: inline-block;
cursor: pointer;
color: #333333;
font-family: Arial;
font-size: 22px;
font-weight: bold;
padding: .01% .1%;
text-decoration: none;
}
<tr>
<td colspan="2" style="height: 100px;" bgcolor="#777d6a">
<h1>Add a New Subdiv file
Logout <a href="/main" class="HomeButton">
<img src="../../../../Pictures/dwelling1.png" height="50"/></a></h1>
</td>
</tr>
Umm you need what you said you need just change your html like this <tr>
<td colspan="2" style="height: 100px;" bgcolor="#777d6a">
<h1>Add a New Subdiv file Logout <img src="../../../../Pictures/dwelling1.png" height="50"/></h1></td></tr>
I have inherited responsibility for some web page updates and have to work within the parameters of the existing design, but the coding used is all tables with lots of formatting in EVERY table cell. I am getting a headache just trying to work through it. I want to simplify by using styles, and need to have several different styles. Specifically, the table heading is all bold, centered and one font size, so it will get one style for the row. The first column needs to be bold and centered, and the fifth column is centered (but regular font weight). All the other columns are left aligned and regular weight. The rows are alternating between white and colored.
So my question is can I style the rows in two styles to change the color, and then how would I style the 2 columns that need to be bold and/or centered, or do I need to style each cell to make this work?
<tr style="height: 27.75pt">
<td style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d2eaf1; padding-bottom: 0in; border-left: #78c0d4 1pt solid; width: 41.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="55">
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<strong><span style="font-size: 10pt; color: black; font-family: 'Tahoma','sans-serif'">2</span></strong></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 137.8pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="184">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Grace Episcopal Church</span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 72.45pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="97">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Nyack</span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 96.85pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="129">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">John Smith</span></p>
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">Tom Jones </span></p>
</td>
<td style="padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 63pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt; border-right-color: #f0f0f0" valign="top" width="84">
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">222-1234</span></p>
<p align="center" style="margin: 0in 0in 0pt; line-height: normal; text-align: center">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">333-6789</span></p>
</td>
<td style="border-right: #78c0d4 1pt solid; padding-right: 5.4pt; padding-left: 5.4pt; border-left-color: #f0f0f0; background: #d2eaf1; padding-bottom: 0in; width: 147.4pt; border-top-color: #f0f0f0; padding-top: 0in; border-bottom: #78c0d4 1pt solid; height: 27.75pt" valign="top" width="197">
<p style="margin: 0in 0in 0pt; line-height: normal">
<span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">johnsmith#optonline.net</span></p>
<p style="margin: 0in 0in 0pt; line-height: normal">
<u><span style="font-size: 10pt; font-family: 'Tahoma','sans-serif'">tomjones#att.net </span></u></p>
</td>
</tr>
I have cleaned up most of the code with internal style sheet, but have two remaining issues. The width of each column does not change using width style in each column class. Also, when I change the font size from 11pt to 12 pt it wraps text in two columns and thus throws off the intended design of the table. I'm sure I am missing a fairly easy tweak at this point.
If it matters, I am using a site that has its own wysiwyg front end and I have limited access to source code - I can make some changes but not full control, but this is what I am stuck working with.
<style type="text/css">
.tablestyle {
border: #78c0d4 1pt solid;
cellpadding:none;
cellspacing: none;
border: medium none;
border-collapse: collapse;
width: 740;
table-layout: fixed;
}
#heading {
text-align:center;
line-height:normal;
font-size:26px;
font-family: Arial, Helvetica, sans-serif;
color:#252525;
}
.tablerowblue {
border: #78c0d4 1pt solid;
background: #d2eaf1;
border-right-color: #f0f0f0;
vertical-align:top;
line-height: normal;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.tablerowwhite {
border: #78c0d4 1pt solid;
background: #ffffff;
vertical-align:top;
line-height: normal;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
.tableheadbold {
padding: 0 5px;
border: #78c0d4 1pt solid;
background: #4bacc6;
border-right-color: #f0f0f0;
vertical-align:top;
text-align: center;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
}
.col1 {
width: 40;
font-weight:bold;
text-align:center;
border: #78c0d4 1pt solid;
}
.col2 {
width:80;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col3 {
width:70;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col4 {
width:170;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col5 {
width:140;
text-align:center;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
.col6 {
width:190;
color:black;
border: #78c0d4 1pt solid;
padding: 0px 5px;
}
</style>
<div>
</div>
<p id="heading">
Troops</p>
<p>
</p>
<table class="tablestyle">
<tbody>
<tr class="tableheadbold">
<td>
Troop</td>
<td>
Chartered Organization<br />
Meeting Location</td>
<td>
Town/City</td>
<td>
Unit Leader<br />
Comm. Chair</td>
<td>
Phone</td>
<td>
E-Mail</td>
</tr>
<tr class="tablerowwhite">
<td class="col1">
2</td>
<td class="col2">
Grace Episcopal Church</td>
<td class="col3">
Nyack</td>
<td class="col4">
Leader Name 1<br />
Leader Name 2</td>
<td class="col5">
222-1234<br />
333-6789</td>
<td class="col6">
johnsmith#optonline.net<br />
tomjones.net</td>
</tr>
<tr class="tablerowblue">
<td class="col1">
10</td>
<td class="col2">
Atonement Lutheran Church</td>
<td class="col3">
Stony Point</td>
<td class="col4">
Leader Name 1<br />
Leader Name 2</td>
<td class="col5">
222-1234<br />
333-6789</td>
<td class="col6">
johnsmith#optonline.net<br />
tomjones.net</td>
</tr>
</tbody>
</table>
Use class selectors..
.tableStyle td {
text-align:left;
}
.row_w td {
background-color:#fff;
}
.row_c td {
background-color:#ffc;
}
.col_1 {
font-weight:bold;
text-align:center;
}
.col_5 {
text-align:center;
}
.row_h { /*anytime you want to customize */ }
HTML
<table class="tableStyle" >
<tr class="row_h" ><th ></th>.. <th></td></tr>
<tr class="row_w" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
<tr class="row_c" ><td class="col_1" ></td>.. <td class="col_5" ></td>... </tr>
</table>
The rest of TDs/THs will follow the style instructed by the TR class style.
You can target a specific td by using the nth-child pseudo selector, that way you won't have to go through all the tds and add a class to them one by one.
A quick demo here : http://jsfiddle.net/Ftb6x/
Not every browser supports it unfortunately : http://caniuse.com/#search=nth-child
The markup looks like it was produced with Microsoft Word. It is difficult to override all the presentational mess there, especially the cell widths set in points, or fractions of points. I would suggest cleaning up the markup. I have a small utility for that. It does not remove the pointless p markup inside cells, but that markup can be effectively ignored in rendering by setting
th p, td p { margin: 0; }
With the cleaned up document, set the font on the page (Arial is boring but better than Tahoma), then table borders, cell spacing, and cell padding reasonably.
Then put the heading cells (I suppose this is what “the table heading” refers to) in a tr that is inside thead, and use th for the cells. They will then be by default bold and centered. They should normally have the same size as the rest of the table, but if desired, make it bigger this way:
thead th { font-size: 110%; }
You might consider making the first column cells th, since they sound like headings, but maybe it is sufficient to set just
td:first-child { text-align: center; font-weight: bold; }
though such styling looks odd for data like in the code snippet – it looks like something that should be left-aligned. Similarly, phone numbers should hardly be centered, but if you insist, this can be done in this case by setting
td:nth-child(5) { text-align: center; }
To set alternating background colors, as in the code snippet posted, use
tr:nth-child(odd) { background: #d2eaf1; }
If someone pays you for extra work needed to make the styling work even on old versions of IE (IE 8 and older), then you can either add column-based styling using col elements or, perhaps better, use the Selectivzr polyfill.