I create a table dynamically by JS with table-layout and width both fixed. And also set the columns' width to a fixed value in pixels. But the created table is not rendered according to the intention in IE7.It seems width property in col doesn't work. But it works both in FF and Chrome.
The created table with following dom structure:
<table id="dynamicTable" cellspacing="0" width="282px" style="table-layout: fixed; overflow: hidden;">
<colgroup>
<col width="129px">
<col width="76px">
<col width="76px">
</colgroup>
<tbody>
<tr><td>head1-1</td><td>head1-2</td><td>head1-3</td></tr>
<tr><td colspan="2">head2-1,2</td><td>head2-3</td></tr>
<tr><td>head3-1</td><td>head3-2</td><td>head3-3</td></tr>
</tbody>
</table>
and css:
table {
border-style: solid solid none none;
border-width: 1px;
border-color: #c0c0c0;
}
td {
border-style: none none solid solid;
border-width: 0 0 5px 5px;
border-color: #000 #000 #c0c0c0 #c0c0c0;
padding: 10px;
margin: 0;
}
#dynamicTable {
background-color: #eee;
}
DEMO
html in jsbin
Can anybody explain the behavior in IE7?
Related
Another web developer wanted to freeze the left-most column and allow scrolling of the table. He found this code and implemented into his client's site. The code does its job and works as expected.
However he added some #media queries to make the table a bit more responsive. When doing so it screwed up the table. It left the left column to not be aligned with the rest of the table.
#media screen and (max-width: 699px) and (min-width: 520px) {
.exportTable th{
min-width: 170px !important;
}
.exportTable td{
min-width:170px !important;
max-width:170px !important;
}
}
So I added the function call inside a window.resize().
$(document).ready(function () {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
$(window).resize(function() {
app_handle_listing_horisontal_scroll($('#exportTable-listing'));
app_handle_listing_horisontal_scroll($('#exportTable-listing2'));
});
});
The code was called upon resize of the window however, the outerHeight and outerWidth grew exponentially, causing a serious issue.
The issue happens when you set the height:
$(this).css('height', current_row_height);
and the width/margin:
$(this).css('position','absolute')
.css('margin-left','-'+table_collumns_margin[index]+'px')
.css('width',table_collumns_width[index])
Here is a fiddle.
Simply grab the window and resize back and forth, the table cell's height/width will exponentially grow, causing a serious issue.
This fiddle demonstrates how when you hit the #media queries that the left column will be misaligned. (it's important when viewing this fiddle to get the #media query to be hit.)
How can I resolve these issues?
In my opinion, adding javascript to the equation makes it overly complex. I believe what you want can be accomplished with CSS alone.
How this works, if the browser has a max-width of 500px, then remove the sticky column. If not, show the sticky column.
Unless you need to support browsers older than IE 9, then try this on for size:
https://jsfiddle.net/BmLpV/284/
CSS:
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
#media (max-width: 500px) {
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
position: relative;
top: auto;
width: auto;
}
.zui-scroller {
margin-left: 0;
}
}
HTML:
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit: To support dynamic heights, you could do something like this:
$(function(){
$('.zui-table tr').each(function(i, row) {
var height = $('.zui-sticky-col').eq(i).outerHeight() - $('.zui-sticky-col').eq(i).height();
$('.zui-sticky-col').eq(i).height($(row).height() - height);
});
})
For better performance, you could only access the element once:
$(function(){
$('.zui-table tr').each(function(i, row) {
var el = $('.zui-sticky-col').eq(i);
var height = el.outerHeight() - el.height();
el.height($(row).height() - height);
});
})
https://jsfiddle.net/BmLpV/289/
I am trying to apply visual cues for the user as they insert data in the form field. Red indicates that the input is not valid, whilst green indicates that the content is valid. The code is functioning, albeit in a glitched manner.
» Issue One: The "red state" flickers on any event.
» Issue Two: If you manually insert correct (number) input in all fields, one by one, and then, in the last field, press backspace, so that the current input field is an empty string, the sum total will return as NaN.
I suspect this is due to the parseInt() JavaScript method, but I need that so that computation can be performed on what is pushed into the arrays.
The specific reason why this is setup this way, is because the on initial load, the fields may already be populated and if so, I want it to display all green boxes and the check mark as a visual queue that, that section is done. This is also the reason why the entire block of code is wrapped in a setInterval() so the page will always be scanning what state should be displayed and apply the proper classes accordingly.
HTML:
Staff Information (for all office
locations)
</center>
</div><span class="mrQuestionText" style=""><br>
<br>
17. A. Indicate the TOTAL number of full time staff your firm has in the following
positions. DO NOT count a staff member in more than one position. (numeric values
only, no need for thousands separator)</span>
<table summary="<hr/><div style='border:1px solid #888;
background:#efefef;margin-top:1em;margin-left:2em;margin-right:2em;padding-top:5px;padding:1em;text-align:left; vertical-align:top; color:#000055;font-weight:normal;'><center><b>Staff Information (for all office locations)</b></center></div><br/><br/>17. A. Indicate the TOTAL number of full time staff your firm has in the following positions. DO NOT count a staff member in more than one position. (numeric values only, no need for thousands separator)<span class='sumcol'></span>" class="mrQuestionTable" style="display: inline-block;">
<tbody>
<tr>
<td id="Cell.0.0"></td>
<td id="Cell.1.0" class="mrGridQuestionText" style=""><span class="mrQuestionText" style=""><span style="clear:none; font-weight:bold; margin:0
auto; display:block; text-align:center;
width:280px;"> </span></span>
</td>
</tr>
<tr>
<td id="Cell.0.1" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">1. Principals/Partners</span>
</td>
<td id="Cell.1.1" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QPrincipals__Partners_QQ17A" id="_Q33_Q0_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.2" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">2. Project
Managers/Directors</span>
</td>
<td id="Cell.1.2" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QProject__Managers_QQ17A" id="_Q33_Q1_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.3" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">3. Designers</span>
</td>
<td id="Cell.1.3" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QDesigners_QQ17A" id="_Q33_Q2_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.4" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #F8F8F8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="mrQuestionText" style=" font-size: 10pt;">4. Other interior design
staff</span>
</td>
<td id="Cell.1.4" style=" text-Align: Center; vertical-align: Middle;
background-color: #F8F8F8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;">
<input type="text" name="_QP1_QGRQ17A_QOther__design__staff_QQ17A" id="_Q33_Q3_Q0" class="mrEdit" autocomplete="on" style="width: 215px; background-color: rgb(229, 242, 251);" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.6a" class="mrGridCategoryText" style="text-align: Left;
vertical-align: Middle; background-color: #d8d8d8; width: 430px; border: 1px
Solid black;"><span class="rrSumColTotal mrQuestionTextBold" style="float:right;">A. Total # of Interior Design Staff:</span>
</td>
<td id="Cell.1.6a" style="text-align: Center; vertical-align: Middle;
background-color: #d8d8d8; width: auto; border: 1px Solid black;">
<span id="customSum" style="color: green; background-color: rgb(229, 242,
251);">0</span>
<div style="display:inline-block; clear:none; width:15px;" id="topFour"> </div>
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style="text-align: left;
vertical-align: middle; width: 430px; border: 1px solid black;
background-color: rgb(248, 248, 248);"><span class="mrQuestionText" style="
font-size: 10pt;"><b style="float:right;">B. Total # of Non-Interior Design
Staff:</b></span>
</td>
<td id="Cell.1.5" style="text-align: center; vertical-align: middle; width:
auto; border: 1px solid black; background-color: rgb(248, 248, 248);">
<input type="text" name="_QP1_QGRQ17A_QNon__Interior_QQ17A" id="_Q33_Q4_Q0" class="mrEdit" autocomplete="on" style=" width: 215px;" maxlength="10" value="">
</td>
</tr>
<tr>
<td id="Cell.0.5" class="mrGridCategoryText" style=" text-Align: Left;
vertical-align: Middle; background-color: #D8D8D8; width: 430px; border-color:
black; border-width: 1px; border-left-style: Solid; border-right-style: Solid;
border-top-style: Solid; border-bottom-style: Solid;"><span class="rrSumColTotal mrQuestionTextBold" style="float: right;">C. Total # of
Employees in the Firm:</span>
</td>
<td id="Cell.1.5" style=" text-Align: Center; vertical-align: Middle;
background-color: #D8D8D8; width: auto; border-color: black; border-width:
1px; border-left-style: Solid; border-right-style: Solid; border-top-style:
Solid; border-bottom-style: Solid;"><span id="spRunningTotal_12_1" class="rrRunningTotal" data-tableordinal="12" data-columnordinal="1">0</span>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript + jQuery:
$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");
var checkValid = setInterval( function() {
$("input.rowA").each(function(i){
var totals = [0,0,0,0];
var total = 0;
if($('input.complete').length == $('input.rowA').length)
{
$('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
$("input.rowA").each(function(i){
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/))
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
}
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
} else {
$('#topFour').html('');
totals = [0,0,0,0];
$("input.rowA").each(function(i){
var items = $('input.rowA:eq(' + i + ')').val();
if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
{
items = 0;
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
} else {
items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
$(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
}
totals.push(items);
});
total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
$.each(totals,function() {
total += this;
});
$('#customSum').text(total);
}
});
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();
CSS:
.complete {
border: solid 1px green;
}
.rowA {
background-color: #CCF3FF !important;
height: 30px;
text-align: center;
font-size: 17px;
color: green;
}
jsFiddle Demo
Lastly, in addition to the issue stemming from the parseInt() utilization, the jsFiddle says that I needed to move my totals, and total variables to a point where they can both be accessed safely and that is where most of my problems started. That is to say, if I re-declare those variables inside their respective $.each() statements and if() conditionals, it works fine but that is bad practice, supposedly.
The main problem is the way setinterval being used. It not only checks the input every 120 ms, it also rebinds the keypress/change events on false input each time and on top of that it uses the same loop within its looping, thus implementing every action multiple times.
Another performance thing is that within that interval the jquery objects have to be searched each time in the DOM. For example, each time $("input.rowA") is used the Dom is searched for inputs of class rowA, whereas if they are put in a variable beforehand, the buffered values can be reused.
Instead of the interval it's best to have a single change/keyup event to do the checks and reuse the same code on page load to check for those preloaded values. If despite all, you still need that interval (although normally the triggers would be known when the check has to be called), the cleaned code should prove more resource friendly (but could be improved further if the setinterval is really really really necessary)
var $inputBoxes = $('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last');
$inputBoxes.addClass('rowA');
//or in case the former code was just a test scenario, use var $inputBoxes = $('input.rowA');
var $custSum = $('#customSum'), $chk = $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">').hide(); //add the check once, but hidden (can be done in hard coded in html instead)
$inputBoxes.on("keyup change propertychange input paste", function(e) {
SetInput(this);
CheckInputs();
});
function SetInput(inputBox){
var $input = $(inputBox), val = $input.val(), isvalid = val.length > 0 && isFinite(val) && val > 0;
$input.data('valid', isvalid).data('number', isvalid ? parseInt(val) : null); //instead of an array, reuse the jquery elements
$input.toggleClass('complete', isvalid).toggleClass('error', val.length > 0 && !isvalid);
}
function SetAllInputs(){
$inputBoxes.each(function(){SetInput(this);});
CheckInputs();
}
function CheckInputs(){
var total = 0, validcount = 0;
$inputBoxes.each(function(){
if($(this).data('valid')){
validcount++;
total+= $(this).data('number');
}
});
$custSum.text(total);
$chk.toggle(validcount === $inputBoxes.length); //show the 'check' image if all input is valid
}
SetAllInputs(); //call on page load, in case of pre entered values.
Fiddle
By changing the listener method from .on() to .bind() and applying more parameter events, the issue of the parseInt NaN result has been solved. I still get a flicker of the red border however. Ultimately however, I think the best result is to build up a master event bubble detector, as many browser plug-gins and standard features (i.e., Internet Explorer's "x" button in form fields) have various ways to bypass jQuery event listeners methods.
**
From
**
$('.rowA').on("keypress change", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
**
To:
**
$('.rowA').bind("change keydown keypress paste cut mouseup focus", function(evt) {
$(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
});
I'm trying to create a simple tab menu using a table and div blocks.
When a tab is clicked, the style of the tab changes to create the effect that the tabs were switched and the body, which is a div block inside a table cell, is switched for another div block using css (display:block and display:none). It works the way it's supposed to in firefox, but in IE 11 the tabs size are modified when they are switched.
Here is the page:
Tab Example
function tabClick(tab, bodyId) {
// tabs and bodyes arrays
var tabCol = [document.getElementById('tab1'), document.getElementById('tab2'), document.getElementById('tab3')];
var bodyCol = [document.getElementById('body1'), document.getElementById('body2'), document.getElementById('body3')];
for (var i = 0; i < tabCol.length; i++) {
// find the tab that was clicke and
// set it's status to selected. set
// the others to unselected
if (tab === tabCol[i]) {
tabCol[i].className = 'tabSel';
} else {
tabCol[i].className = 'tabUnsel';
}
// show the body related to the selected
// tab and hide the others
if (bodyCol[i].id == bodyId) {
bodyCol[i].style.display = 'block';
} else {
bodyCol[i].style.display = 'none';
}
}
}
.tabUnsel:hover {
text-decoration: underline;
}
.tabUnsel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
cursor: pointer;
background-color: #f0f0f0;
border: #898c95 solid 1px;
border-radius: 5px 5px 0px 0px;
}
.tabSel {
text-align: center;
vertical-align: central;
padding: 5px 10px 5px 10px;
white-space: nowrap;
background-color: #ffffff;
border: #898c95 solid 1px;
border-bottom: 0;
border-radius: 5px 5px 0px 0px;
}
<table style="width: 500px; font-family: verdana; font-size: 11px;" cellspacing="0">
<tr>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab1" class="tabSel" onclick="tabClick(this,'body1');">Tab 1</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab2" class="tabUnsel" onclick="tabClick(this,'body2');">Tab 2</td>
<td style="border-bottom: #898c95 solid 1px;"> </td>
<td id="tab3" class="tabUnsel" onclick="tabClick(this,'body3');">Tab 3</td>
<td style="width: 100%; border-bottom: #898c95 solid 1px;"> </td>
</tr>
<tr>
<td style="border: #898c95 solid 1px; border-top: 0; padding: 10px;" colspan="7">
<div id="body1" style="width:100%; min-height: 300px;">
Tab 1 content
</div>
<div id="body2" style="width:100%; min-height: 300px; display: none;">
Tab 2 content
<br/>
<img src="http://tropicalfarm.byethost13.com/tabs/img1.jpg" />
<img src="http://tropicalfarm.byethost13.com/tabs/img2.jpg" />
</div>
<div id="body3" style="width:100%; min-height: 300px; display: none;">
Tab 3 content
</div>
</td>
</tr>
</table>
try to add this to your empty tap style for example
empty-tap{
min-height: 500px;
height:auto !important;
height: 500px;
}
the source here
I have use the className like below code snippet.
Code Snippet
<tr class="gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand">
<td class="e-rowcell ">
<div style="height: 20px;">
<div class="intend" style="width: 0px; height: 1px; float: left; display: inline-block;">
</div>
<div class="e-gridtreeexpand" style="float: left; display: inline-block;">
</div>
<div class="e-cell" style="width: 100%; display: inline-block;">
6
</div>
</div>
</td>
<td class="e-rowcell">Implementation Phase 2</td>
<td class="e-rowcell">02/15/2010</td>
<td class="e-rowcell"></td>
<td class="e-rowcell">8</td>
<td class="e-rowcell">50</td>
<td class="e-rowcell"></td>
<td class="e-extendcolumn"></td>
</tr>
Note: here class Name = gridrowtaskIdlevel0 e-alt_row e-gridtreerowexpand
i have tried to apply css style(display) for this row based on some condition like following
two ways
$('.gridrowtaskIdlevel0').addClass('e-hide');
CSS:
.e-hide{
display:none;
}
2. $('.gridrowtaskIdlevel0').css({'display':'none'});
how to apply css style to tr in runtime
Don't really understand what runtime do you mean, but if you just need make this code working - you need put it in some event: click on smth, doc.ready and etc.
Please, try such construction:
JS:
$(document).ready(function() {
$('.gridrowtaskIdlevel0').addClass('e-hide'); // the 1st way
// or
$('.gridrowtaskIdlevel0').css({'display':'none'}); // the 2nd way
// or
$('.gridrowtaskIdlevel0').hide(); // the 3rd way
});
But If you will use the 1st way you also need to add css (same to your).
I recommend use 1st or 3rd variant, but all of they will work similarly.
Good luck!
<tr>s don't always do well with all styles.
Here's an example FIDDLE that shows how you might focus on <td>s.
CSS
table {
border-collapse: collapse;
}
tbody, th, td {
padding:0px;
margin:0px;
border:0px;
border-collapse: collapse;
padding: 5px;
}
tr.foo {
border: 1px solid blue;
background-color: red;
}
tr:nth-child(3) td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
tr:nth-child(3) td:nth-child(1){
border-left: 2px solid blue;
}
tr:nth-child(3) td:nth-child(2){
border-right: 2px solid blue;
}
Could you tell me how to limit content width to the screen boundary? For the following script i always get 2px width wider than screen (allowed space) width.
document.body.scrollWidth is always 2px wider than screen
<html>
<head>
<style>
* {margin: 0; padding: 0}
</style>
<script type="text/javascript">
function test(){
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
alert(screen.width);
}
</script>
</head>
<body onLoad="test()">
<div id="divtest">
<hr size="2" width="100%" id="hrtest" />
</div>
</body>
</html>
hr {
border-right : 0;
border-left: 0;
}
Should do it.
You may wish to add important to the style, or iterate through all hr in document and set in-line style.
I believe that the problem is the browser is adding a 1 px border to build the hr. Inspecting the hr with chrome shows us the following styles applied by default to all hr's:
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
Disabling the border-width: 1px; will give the expected results, but hides the hr. Anyway, removing the hr's width works :P
The default user agent stylesheet for the (Horizontal Line) HTML
element is :
hr {
display: block;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
border-style: inset;
border-width: 1px;
}
If you want to fix horizontal scroll across the HTML document then follow the solution:
Solution#1:
hr{
width: 100%;
box-sizing: border-box;
}
Solution#2:
hr{
width: 100%;
border-left: 0px;
border-right: 0px;
}
Setting the border width to 0 will fix this.
http://jsfiddle.net/chuckplayer/AuC8b/
* {margin: 0; padding: 0; border: 0}
<div id="divtest" width="100%">
<hr size="2" width="100%" id="hrtest" />
</div>
alert(document.body.scrollWidth);
alert(document.getElementById("hrtest").scrollWidth);
alert(document.getElementById("divtest").scrollWidth);
If you really want the <hr> to match the exact width of the body then I would recommend hiding the border style of the <hr> and using a background-color with a height: 1px. You can view the code here: http://jsfiddle.net/helpinspireme/fg6Mp/3/
CSS
hr{
border-style: none;
background: #000;
height: 1px;}
jQuery
var body_width = $('body').width();
var div_width = $('div').width();
var hr_width = $('hr').width();
alert(body_width);
alert(div_width);
alert(hr_width);
HTML
<div>
<hr/>
</div>
Use a table as follows:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<!-- your htlm block -->
</td></tr>
<tr><td style="border-bottom: 1px solid black;" height="50">
</td></tr>
</table>
You can play with the height of the row or use border-top, each time you need a hr add this row in your table