I'm trying to design a form looking like that:
I tried with a table embedding another two tables, one with 5 rows and the other with 6 rows, and tried to arrange it with CSS, but somehow it doesn't seem to work out. I'm looking for a solution to correct my design or for completely another (with div's?). Here my code:
<td style="display: table-cell; text-align: right; height: 80%;">
<table style="display: table-cell; text-align: right; height: 80%;">
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier1"
labelfor="inputPalier1" />
</td>
<td width="180" >
<tech:text property="inputPalier1"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier2"
labelfor="inputPalier2" />
</td>
<td width="180" >
<tech:text property="inputPalier2"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier3"
labelfor="inputPalier3" />
</td>
<td width="180" >
<tech:text property="inputPalier3"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier4"
labelfor="inputPalier4" />
</td>
<td width="180" >
<tech:text property="inputPalier4"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
<tr>
<td width="180" align="right">
<tech:label key="tolerancesurecarts.input.label.palier5"
labelfor="inputPalier5" />
</td>
<td width="180" >
<tech:text property="inputPalier5"
mode="EEEE" maxlength="8" size="9"/>
</td>
</tr>
</table>
</td>
<td style="text-align: left;">
<table style="text-align: left;">
<tr>
<td><div style="background-color: #CDFFAA; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFFF99; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFDC77; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #FFBA44; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #F07300; height: 100%;"> </div></td>
</tr>
<tr>
<td><div style="background-color: #A00000; height: 100%;"> </div></td>
</tr>
</table>
</td>
I tried some different variations, using various display css attributes on my first table, height css attributes on the cells, and so on, to no avail. Any idea?
I hope this is what you are looking for https://jsfiddle.net/sua15zok/3/ . Please specify if any corrections in css required. I will do it and update the required UI.
Related
I am helping a friend build her website. I am trying to install Recaptcha page on her website because her HTML is really old. I accidentally deleted the html code for her contact us page so now I am trying to rebuild the page. It's very basic but for the life of me, I can't move the contact us form to the center of the page. Could someone send some code for me to set the "contact us" form to the center of the page?
I pasted this code to build a form:
<div class="container">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
Because I lost the original contact us page I copied the code from one of her other pages and am trying to find where I can implement the form on the page. This is the page code I copied on the contact us form""
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fidelis Design & Construction, LLC</title>
<style type="text/css">
<!--
body {
background-image: url(BGs/RH.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
background-repeat: no-repeat;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #FFFFFF;
}
.style9 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #333;
}
.style6 {
color: #000033;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
}
a:hover {
color: #A52113;
}
.style7 {
color: #A52113;
font-weight: bold;
}
.style10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8125em;
color: #333;
}
.style11 {
color: #A52113;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A52113;
font-weight: bold;
}
</style>
</head>
<body>
<table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="270" align="center" bgcolor="#000033"><img src="BGs/logo.jpg" alt="Fidelis Design and Construction" width="135" height="189" border="0" longdesc="http://www.fidelisdc.com" /></td>
<td width="845" rowspan="5" align="left" valign="top"><table width="775" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="93"> </td>
<td width="137"> </td>
<td width="170"> </td>
<td width="75"> </td>
<td width="175"> </td>
<td width="125"> </td>
</tr>
<tr>
<td align="left" valign="top"><img src="BGs/sdvosb_logo_alt.png" width="93" height="89" /></td>
<td colspan="5"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="5" align="right" valign="bottom" background="BGs/HD.png"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"></td>
</tr>
<tr>
<td align="right"><span class="style3"> <span class="style4"><span class="style7">Corporate Headquarters :</span></span> 408 East 4th Street, Suite 308, Bridgeport, PA 19405. <span class="style4"><span class="style7">P</span></span> (610) 277-7094 <span class="style4"> <span class="style7">F</span></span> (610) 277-7095<span class="style4"> </span></span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
<td colspan="4" align="right" valign="bottom"><span class="style6">Home | About Our Founder | Current Projects | Service Strategy | Contact Us </span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="BGs/SS.png" width="129" height="16" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">At FDC we are operations driven, providing our clients with exceptional services and expertise, resulting in the highest quality projects </td>
</tr>
<tr>
<td height="20" colspan="6" align="left"><span class="style10">delivered in the safest manner. </span></td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">FDC seeks to develop loyal, long-term client relationships which result in desired profits, strategic partnerships and opportunities.</td>
</tr>
<tr>
<td height="20" colspan="6" align="left"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><strong>Our services include:</strong></td>
<td colspan="2" rowspan="9" align="right"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left"><span class="style11">• </span><span class="style10">Construction capabilities using state-of-the-art technology & equipment</span></td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Comprehensive estimating and pricing procedures</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Critical path sequencing</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Design-Build Contracting Capabilities</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Materials procurement </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Project management </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Subcontractor prequalification </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Value engineering and constructability reviews</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="135" align="center" bgcolor="#EFEFEF"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="39" colspan="2" background="BGs/PDFHeader.png" class="style1"> </td>
</tr>
<tr>
<td width="45" align="center"><a href="PDF/philadelphia_weekly_rbennett.pdf" target="_blank" ><img src="BGs/pdf_icon.jpg" width="32" height="33" border="0" title="Click to download / open this document" /></a></td>
<td width="115"><img src="BGs/Readmore.png" width="113" height="26" border="0" title="Click to download / open this document" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="265" align="center" bgcolor="#000033"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" height="25" background="BGs/Contact.png" class="style1"> </td>
</tr>
<tr>
<td height="18" align="left"><span class="style12">Corporate Headquarters :</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2">408 East 4th Street</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Suite 308</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Bridgeport, PA 19405</td>
</tr>
<tr>
<td height="18" align="left"><span class="style2"><strong>P</strong> (610) 277-7094</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2"><strong>F</strong> (610) 277-7095</td>
</tr>
<tr>
<td height="18" align="left" class="style2">--------------------------------------</td>
</tr>
<tr>
<td align="left"><img src="BGs/Email.png" width="103" height="52" border="0" title="Contact Us"/></td>
</tr>
<tr>
<div class="container">
<div style="text-align:right">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" bgcolor="#000033"><table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="524" align="left"><span class="style9">Copyright © 2015, Fidelis Design & Construction, LLC. All Rights Reserved.</span></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
You can apply display: flex; and justify-content: center;" to the column class that's wrapping you form. I would however, suggest adding a differently named class to it to avoid interference with the column class just before it. e.g. <div class="column form-wrapper">
I've been trying to adjust a <td> from my website in a place, but I just can't adjust its size, making the website create a rollbar in the bottom leading to the right side because the <td> is exceeding the page's size.
The part in question is the "right-column" that is in charge of the tip, the horoscope and the download banner below.
I'm new with web programming and I'm having a lot of trouble configuring this website, since it's an existing old background from an extinct website, so it's very hard to update it to new techs. It's already been a miracle I made some things that were in Flash being "converted" to Javascript/CSS.
<table id="main_bloc" border="0">
<tbody>
<tr>
<td style="border-bottom: 1px solid white; --darkreader-inline-border-bottom:#303436;" colspan="2" id="header_bloc" onmouseleave="showNavbarSection(-1);" data-darkreader-inline-border-bottom="">
<div id="logo" onmouseenter="showNavbarSection(-1);"><img src="medias/images/winxie.gif" onmouseover="this.src='medias/images/winxie2.gif';" onmouseout="this.src='medias/images/winxie.gif';" style="width: 106%;height: 153px;top: 0px;left: 3px;position: relative;"></div>
<table id="language_selector" onmouseenter="showNavbarSection(-1);">
<tbody>
<tr>
<td><img src="medias/images/lang_top.gif" id="language_selector_border" style="margin-bottom: -1px;"></td>
</tr>
<tr>
<td><img src="medias/images/menu_lang_button_img_en_arrow.gif" onclick="showLanguages();" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_it.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_fr.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_es.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_de.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_pt.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_ru.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_tr.gif" id="language_selector_item"></td>
</tr>
<tr>
<td><img src="medias/images/lang_bottom.gif" id="language_selector_border" style="margin-top:-2px;"></td>
</tr>
</tbody>
</table>
<table id="navbar">
<tbody>
<tr>
<td onmouseover="showNavbarSection(0);"><span id="navbar_section"><strong>News</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(1);"><span id="navbar_section"><strong>Story</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(2);"><span id="navbar_section"><strong>Games</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td><span id="navbar_section"><strong><a id="navbar_section" href="#Parents"></a>Parents</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(3);"><span id="navbar_section"><strong>Fun Zone</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(4);"><span id="navbar_section"><strong>Community</strong></span></td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_0" onmouseover="showNavbarSection(0);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Announcements |</td>
<td> Events |</td>
<td> Articles </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_1" onmouseover="showNavbarSection(1);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Summary |</td>
<td> Characters |</td>
<td> World Locations </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_2" onmouseover="showNavbarSection(2);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Winx Adventure |</td>
<td> Mini-Games |</td>
<td> Web Avatar </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_3" onmouseover="showNavbarSection(3);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Music |</td>
<td>Videos |</td>
<td> Wallpapers |</td>
<td> Magazines </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display: none;" id="navbar_subsection_4" onmouseover="showNavbarSection(4);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Forums |</td>
<td> FAQ |</td>
<td> Bug Report |</td>
<td> Contact us </td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="submenu">
<td colspan="2">
<iframe style="width: 100%; position: relative; left:15" src="././pages/Iframes/HotLinks.php" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" data-ruffle-polyfilled=""></iframe>
</td>
</tr>
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php" data-ruffle-polyfilled=""></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<img onclick="javascript:Previous();" class="previous" style="position: relative; top: 274px; left: 541px; cursor: pointer;" src="././medias/images/arrow_left.png" onmouseover="this.src='././medias/images/arrow_left_hover.png';" onmouseout="this.src='././medias/images/arrow_left.png';"><img onclick="javascript:Next();" class="next" style="position: relative; top: 274px; left: 625px; cursor: pointer;" src="././medias/images/arrow_right.png" onmouseover="this.src='././medias/images/arrow_right_hover.png';" onmouseout="this.src='././medias/images/arrow_right.png';"><table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><div class="ckin__player default ckin__overlay"><video class="file" preload="metadata" poster="././medias/images/Video_Thumbs/happy2021thumb.png" src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video><button class="default__button--big toggle" title="Toggle Play"><i class="ckin-play"></i></button><div class="default__controls ckin__controls"><button class="default__button toggle" title="Toggle Video"><i class="ckin-play"></i></button><div class="progress"><div class="progress__filled"></div></div><button class="default__button volume" title="Volume"><i class="ckin-volume-medium"></i></button><button class="default__button fullscreen" title="Full Screen"><i class="ckin-expand"></i></button></div></div></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle" style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext" style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and specialists are hoping it will be better than the last one. The witches? Not sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number" style="color: white; font-family: Arial; font-size: 20px; text-shadow: rgb(86, 0, 39) 1px 0px 0px; --darkreader-inline-color:#e8e6e3;" data-darkreader-inline-color=""> 1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe" style="position: relative;/* margin-left: 808px; */">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
<iframe style="position: relative;width: 705px;height: 219px;margin-left: -466px;margin-top: -91px;" frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="http://onlinewinxclub.com/center-web/medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
<script src="js/ckin.js"></script>
<script src="js/cssrefresh.js"></script>
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.
You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}
Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...
For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}
I have been agonizing over this, the alignment of my third table row is complete messed when viewed either Firefox or Chrome but look exactly as expected in IE9.
I have tried using style (text-align, width, margin-left, overflow, etc...) and direct align, width. etc.... When creating the width, I have tried using % and direct pixel values.
The parent table has a width 400px, or at least is should because that is the width of the parent TD and table width is 100% and cellpadding and cellspacing is 0.
<table align="center" style="width: 650px; border-style: none" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 250px;"><img src="../images/incidentmonitor.gif" alt="" /></td>
<td style="text-align: center; width: 400px">
<!-- Login section Table -->
<table align="center" style="width: 100%; border-style: none;" class="clsLoginTable" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: right; width: 25%; overflow: hidden;"> </td>
<td style="text-align: right; width: 5%; overflow: hidden;"> </td>
<td style="text-align: left; width: 70%; overflow: hidden;"> </td>
</tr>
<tr>
<td colspan="3" class="clsLoginLabel" style="text-align:center;">
<p><b>Please enter your User ID and Password</b><br /><br /></p>
</td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">User ID:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input name="UserID" value="administrator" size="20" /></td>
</tr>
<tr>
<td style="text-align: right;" class="clsLoginLabel">Password:</td>
<td style="text-align: right;"> </td>
<td style="text-align: left;"><input autocomplete="off" type="password" name="Password" onkeydown="SendForm(event.keyCode)" size="20" /></td>
</tr>
<tr style="display: block;">
<td align="right" width="25%" class="clsLoginLabel">Domain:</td>
<td align="right" width="5%"> </td>
<td align="left" width="70%">
<select id="DomainName" name="DomainName" size="1" style="width: 200px">
<option selected="selected" value='' >Built-In</option>
<option value='dnsdev.com' >dnsdev.com</option>
<option value='dnsdev.org' >dnsdev.org</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<button id="submit_request" name="submit_request" class="clsButton" accesskey="L" onclick="Validate();return false" Title="Login to IncidentMonitor "><u>L</u>ogin</button>
</td>
</tr>
</table>
</td>
</tr>
</table>