i have a table like below where the scrollbar is working in IE 11 with scroll=yes, but the same is not working in Chrome.Any suggestion or help would be appreciated . thank you.
table,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
<body scroll="yes" scrolling="yes">
<table style="width:100%">
<tr>
<td width="25%"><label>name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>last name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>middle name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label> name </label></td>
<td width="75%"><input type="text"></td>
</tr>
</table>
Neither of those attributes on the body element are supported in anything other than Internet Explorer. In fact, the Mozilla Developer Network website doesn't list it as an attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
I would recommend doing it in css instead using overflow, overflow-x or overflow-y
Simply add overflow-y:auto to your body tag and that should work. (or overflow-y:scroll)
table,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
<body scroll="yes" scrolling="yes" style='overflow-y: auto;'>
<table style="width:100%">
<tr>
<td width="25%"><label>name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>last name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label>middle name </label></td>
<td width="75%"><input type="text"></td>
</tr>
<tr>
<td width="25%"><label> name </label></td>
<td width="75%"><input type="text"></td>
</tr>
</table>
Related
I want to align check box with image (barcode) on the left side of that column. What I've tried so far is insert same image in both columns, but hide the one on the right. Instead of image on the right, checkbox is shown. But, it is not aligned with barcode on the left column. Is it possible to do this?
Image size can vary, it is dynamic. That is why I've inserted same image on both columns (same height). On the example all barcode images are of the same size, but it's not necessary the case.
Perhaps someone has better idea to align checkboxes on the right with barcodes on the left?
Here is the example.
The code I have problem with (I want to align this checkbox):
<img src='http://i.imgur.com/4PxPOjx.png' style='visibility:hidden;width:30px;'>
<input type='checkbox'><br/>
<label></label><br/>
Currently it looks like this:
rowspan attribute can be used for your td!
Since, you didnt want to have the rows specifically visible, style the td that contains the barcode with border-bottom-style 0px.
With that, you task would be simplified!
#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
/*#tblArticles tr:nth-child(even) {background-color: #dddddd;}*/</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}
<label style='margin-right:20px;'><b>Opomba za dostavo:</b></label>545454<br/>
<label style='margin-right:20px;'><b>Št. zunanje naročilnice:</b></label>fsdfsfd<br/><br/>
<table border="1" id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody>
<tr>
<td rowspan="11"><label>Mali kuharski mojster</label></td>
<td style="border-bottom-style:hidden;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
<label></label><br/></td>
<td rowspan="11">11,00</td>
<td rowspan="11">KOM</td>
<td rowspan="11">3221,00 €</td>
<td rowspan="11">35431,00 €</td>
<td rowspan="11">22,00 %</td>
<td rowspan="11">7794,82 €</td>
<td rowspan="11">43225,82 €</td>
</tr>
<tr>
<td style="border-bottom-style:0px;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
</td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>0,00 €</td><td>0,00 €</td><td>0,00 €</td>
</tr><tr>
<td>22 %</td><td>37929,10 €</td><td>8344,40 €</td><td>46273,50 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>8344,40 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>46273,50 €</b></label>
</div></div><br/><br/><br/>
Hope it helps!
Here you go, working fiddle:
* {
text-align: center;
}
<table style="width:100%">
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td><img src="http://media.idownloadblog.com/wp-content/uploads/2016/09/Google-Allo-1.0-for-iOS-app-icon-small.png"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/S8DKhY39f1jpVy1-JV3qpI_ftuJwJnKjNbRhrVRGi-MQjr6i73JQI3-dmkQ93E0Jb4hT=w300"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
</table>
As per my understanding you may use this code, first run this code by clicking on Run code Snippet button and then verify what was your expectation :
<html>
<body>
<table>
<tr>
<th>
Left Column
</th>
<th>
Right Column
</th>
</tr>
<tr>
<td>
<img src="https://dummyimage.com/240x80/000/fff">
</td>
<td>
<input type="checkbox" style="display:block; margin:0 auto;">
</td>
</tr>
</table>
</body>
</html>
Just make your table properly, rearrange checkboxes and images to they suit the following structure:
<table style="width:100%">
<tr>
<th>Image</th>
<th>Checkbox</th>
</tr>
<tr>
<td><img src="http://placehold.it/200x50" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
</table>
If you face the problem of "merging" cells (as it's done in your first column), take a look on this example:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
}
img {
vertical-align: top;
}
img ~ label {
display: block;
}
<table style="width:100%">
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
</thead>
<tr>
<td rowspan="3">Mali kuharski mojster</td>
<td><img src="http://placehold.it/200x50" alt="Image"><label>NllMUkZGIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"><label>SDRNM0Q4IE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"><label>RzNCRTJYIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
</table>
Pay attention to "rowspan" attribute!
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I have a table that I broke out to two tables because I need to have the scrolling functionality only span the top table. The bottom table is a textarea box. What I need to do is make the bottom table blend right into the top table to looks as if its all 1 table while maintaining 2 tables. Maybe by modifying the borders?
<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/>
<table class="data_table vert_scroll_table" style="width:360px;">
<tr>
<th style="text-align: center;">User</th>
<th style="text-align: center;">Date</th>
<th style="text-align: center;">Comments</th>
</tr>
<c:forEach var="comments" items="${entry.comments}">
<tr id="id${comments.id}">
<c:choose>
<c:when test="${comments.auditable != null}">
<td>
${comments.auditable.createdBy.lastName}, ${comments.auditable.createdBy.firstName}
</td>
<td title="<fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />"><span class="mouseover_text"><fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" /></span>
</td>
</c:when>
<c:otherwise>
<td colspan="1">${lastName}, ${firstName}</td>
<td title ="${comments.date}"><span class="mouseover_text">${comments.date} </span></td>
</c:otherwise>
</c:choose>
<td id="comments-${comments.id}" style="width:400px;"><pre style="width: auto;">${comments.comment}</pre></td>
</c:forEach>
</tr>
<tr id="commentRow">
</tr>
</table>
</ctl:vertScroll>
<c:if test="${lock.locked || form.entryId < 0 }">
<%-- This is the row for adding a new comment. --%>
<table class="data_table vert_scroll_table" style="width:360px;">
<td colspan="3">
You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br/>
<textarea id="comment" name="comment" rows="2" cols="125" style="width:400px;"
onfocus="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)" ></textarea>
<img src="../images/icon_add.gif" border="0" alt="Add"/>
</td>
</c:if>
</table>
Try rethinking your markup. This would be much more suited:
<table>
<thead>
<tr>
<th>User</th>
<th>Date</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>
<textarea>...</textarea>
</td>
</tr>
</tfoot>
</table>
Since your code has some weird stuff in it <c:forEach var="comments" items="${entry.comments}">, I'm not gonna mess with it. But I will give the the answer in a nutshell. Disclaimer: This is how, I would do this, but probably there are better ways of doing things. Also, I'm using dotted borders for the demo.
(1) Get the width's under control
Lets make a global wrapper with set width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
miley rocks!
</div>
(2) Lets make an example table
We are now making an example table with some random list. Also lets width: 100%; to the table, so it will match the global wrapper's width.
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness level</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
(3) Now the second table
Lets add the form table or aka. the second table..
<table style="width: 100%; border: 1px dotted blue;">
<tr>
<td>
<textarea name="my_textarea"></textarea>
</td>
</tr>
</table>
Or why use <table>?
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
(4) And now everything together
All tables and containers together. This should result two containers with the same width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness leve</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
</div>
Not sure how much this helps. But this is the general idea for that type of problem :)