I'm having an impossible time getting border-collapse to work for me. The page I'm working with has a table in it. The table has 2 columns, one for a label and the other for data. Sometimes there is no data to display, but I still need to rendor the table row and label column because I have a JQuery script that might need to write data to the data column. In other words, regardless of whether there is data or not, I need to rendor the table row as a placeholder. If there is no data I want the row to collapse.
In the html below, visibility:hidden is working since I won't see the label 'Condition:', but the row doesn't collapse. I've tried looking at it in FireFox 13, Safari 5 and IE 8. All three show the same problem - the row never ccollapses even though it doesn't display anything.
#data
{
font-size: 95%;
}
#data table
{
border-collapse: collapse;
margin-top: 15px;
margin-bottom: 15px;
}
#data table td
{
padding-left: 5px;
}
<div id="data">
....
<table>
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
....
</div>
What more do I need to do to make this happen? I'd like it to be cross-browser compatible. I'm trying to support IE7 and above. I'm guessing someone is going to give me hell for using a table in the first place... ;)
The visibility property determines whether a given element is visible
or not (visibility="visible|hidden"). However, when visibility is set
to hidden, the element being hidden still occupies its same place in
the layout of the page.
Display VS Visibility
use display:none; to hide and display:block; to show
<table style="border-collapse:collapse;">
<tr style="display:none;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"></td>
</tr>
</table>
Note: border-collapse:collapse; is used in a situation, where you have borders specified for container and the contained and you want border to be displayed once.
<table border="0" cellpading="0" cellspacing="0">
and try to use and &nbps; or something like that, if you don't have data in a cell
something like:
<table border="0" cellpading="0" cellspacing="0">
<tr style="visibility:hidden;">
<td><div class="datalabel">Condition:</div></td>
<td class="datainfo"> </td>
</tr>
</table>
Related
I am using AngularJS to create dynamic rows and columns. And then on the save button click when there is no data in any cell I want highlight that cell.
So below is the JSFiddle for my demo:
http://jsfiddle.net/jyshdf85/
My table code as below:
<table class="table table-bordered" ng-form="targetTableForm" ng-class="{submitted: targetTableSubmitted}">
<colgroup>
<col class="unique-id">
</colgroup>
<thead>
<tr>
<th class="unique-id">Name #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<!--<th class="view-next-set">...</th>-->
<td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td contenteditable="true"></td>
<td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined" ng-required="!$parent.$last"></td>
<!--<td class="blank" colspan="2"></td>-->
</tr>
</tbody>
</table>
I have my CSS as:
.table.submitted td.ng-invalid {
border-color: red;
}
How this works is:
Add a couple of columns by clicking on add column, then type in the table cell of the newly added columns,it would create a new row automatically. Create couple of rows. Then remove the values from the table cell. Now when you press Save button it highlights that table cell.
All this works fine the only issue being the way the table cell is being highlighted. The border of the cell is not fully highlighted. You can see the demo in the JSFiddle. I have also uploaded the image of this as:
https://imgur.com/a/FAHNYOn
I can change the background color of the cell and it works but looks ugly with all cells highlighted.
Can anyone point out what I am doing wrong here?
Looks like the border is not fully visible because covered by other cells' border.
A quick solution I suggest is to use the outline property instead of the border to highlight cells:
.table.submitted td.ng-invalid {
outline: 1px solid red;
outline-offset: -1px;
}
Or you can simply make the border wider, to cover other cells' border, but I think this is not the best way:
border: solid 3px red;
Hope this helps you getting the desired result!
A better and complete solution to this problem is covered in the following CSS-Tricks article: https://css-tricks.com/table-border-collapse-issue/
Basically, what you need to do is to put a <div> element inside your <td> and, using negative margins and z-index, you'll get the job done in no time. Refer directly to the article linked for a complete example with a Codepen.
Check it out and let me know if this works for you! :)
Hello I have nested a table inside a gridview(which I think is also basically a table) in asp.net ,but the thing is the table which is inside a cell leaves a space at it edges ,(i.e from the wall of the grid view), I want this space to be minimized this is my grid view :
<FooterTemplate>
<table border="1" cellspacing="0" cellpadding="0" width="auto">
<tr><td><asp:Label ID="cl_crTotal" runat="server" CssClass="alLbl" /></td>
</tr>
<tr><td><asp:Literal runat="server" ID="closingTotC" ></asp:Literal></td>
</tr>
</table>
</FooterTemplate>
I have also given the image ,please check
http://imgur.com/4ukGm&K8tRy "this image"
PS:I know and hope this is a simple problem and would be easily solve just that I am new to this
Without seeing the code of that grid-view, I can only guess, that there are some paddings or margins set, which cause this behavior.
So for the grid cell, in which the table appears set
padding: 0;
and for the table itself set
margin: 0;
Actually, its pretty simple. If you look at all your fields in the data, you see actually every field has it. Its called a padding.
What you should do is remove the padding from that cell. I am going to asume you dont want it in the rest of your table, so what you do is give the specific cell an id, and add in the css a rule to it saying it shouldnt receive any padding.
your html would look like this:
<body>
<table>
<tr>
<td id="cell_id">somedata</td>
</tr>
</table>
</body>
This would look something like this in your css file
#cell_id { padding: 0px; }
<table width="825" border="0" cellspacing="1" class="tableLines1" cellpadding="0">
<tr>
<td align="left" valign="middle">Account / BIC</td>
<td align="left" valign="middle">Name</td>
<td align="left" valign="middle">Email Address</td
</tr>
<tr>
<td ><%=Data.getAccount())%></td>
<td ><%=Data.getName())%></td>
<td width="250px"><%=Data.getEmailAddress())%></td>
</tr>
</table>
I have the following table. This data object get populated from database. The problem is when email address gets bigger the width of table also increases. For example
emailAddress = lolol#ghgg.fdg, jjjjjjoj#hiuh.com, jojo#hsc.comddddddddddddddddddddddddddddddddd
then html intelligently breaks it from spaces and make three two rows like this.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comddddddddddddddddddddddddddddddddd
but what i want is that if emailAddress size increases a certain value table size i.e column width should remain constant.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comdddddddddddddddddddddd
ddddddddddd
To be more specific i want the data to be displayed as shown above!
Can anyone please guide me. Thanks !
Edited : I want html to intelligently decide the column widths itself. Just not itself increase the table width from the specified value !
Use this CSS rule: word-wrap: break-word;
break-word means the text will wrap to next line.
word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
you can try wrapping your email address in a div with overflow set to hidden or scroll
<td width="250px"><div style="overflow:hidden; width:100%"><%=Data.getEmailAddress())%></div></td>
I want to add two table or more consecutively and they must be seemed like one table.
<html>
<head>
<style type="text/css">
.cls
{
border:1px solid #000000;
}
.cls td {
border:1px solid #000000;
}
</style>
</head>
<body>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
</body>
</html>
My problem is the line that tables combined has a doble line normally. How can i show it like a single line.
.cls-last
{
border-top: 0px;
}
On your 2nd table:
<table class="cls cls-last">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
You could change the top (or bottom) border of the table via CSS.
However, alignment could be a challenge here. In the example you gave, not a problem--each contains 3 (relatively) similar characters each. So, it'd be nearly identical. However if one column in one table has 10 characters for instance, HTML is going to stretch that column and you're going to be left with two obviously different entities.
So, to make this work 100% of the time, you're going to need to set widths and (possibly) overflow properties as well.
I'm having a tough time understanding why you'd have to do it this way. I'm sure you've got a reason, but two similar entities with similar widths and columns should be able to be commingled. If the tables were to only sometimes appear, or you wanted to remove rows, you could do so via Javascript and/or CSS or at the server level when rendering.
I have a table as follow:
<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
The first cell of the first row, has a padding at the bottom. Well it's not really padding but it looks like padding and using firebug I can not find what the space there actually is.
I think what is happening is that, firefox automatically adjusts the bottom padding of the first td in the first tr with the padding top of the first and only td of the second tr.
p.s. works perfectly fine in Chrome.
Basically what I am trying to achieve is for the height of the first td in the first tr, to be only as tall as required but not taller so that the content of that cell ends on the same place as where the td ends without any space between them.
The website URL is: http://mmamail.com/
It seems to have something to do with the padding-top placed on the first TD of the SECOND TR. The weird thing is that it works nicely on chrome.
You've presented the browser with an incomplete layout problem. You have a three-by-three grid, none of whose columns or rows have fixed sizes. So the issue is you end up with a taller first row than you intended, as the browser tries to allocate ‘spare’ height caused by the rowspan in the second column amongst the cells in the first column.
There isn't a standardised algorithm for this; browsers do different things, often including unpleasant things like looking at the raw number of bytes of markup in each cell. You don't want to rely on this behaviour. It also slows page rendering down and can give really weird, page-distorting effects when there's a very small or large amount of content. If you need to use tables for layout, make sure to use table-layout: fixed with explicit widths for the fixed-size columns, and set explicit heights for cells when there are rowspans, to avoid ambiguity.
But a proliferation of rowspan/colspan is often a hint you should be looking at a different form of layout. This example is very much easier to acheive using CSS instead. eg.:
<div id="ads">
<script type="text/javascript">//...google stuff...</script>
...
</div>
<div id="content">
<div id="video"><fieldset>
<legend>...</legend>
<object ...>
</fieldset></div>
<form id="poll" method="post" action="..."><fieldset>
<legend>...</legend>
...options...
</fieldset></form>
<form id="subscribe" method="post" action="..."><fieldset>
<legend>...</legend>
...fields...
</fieldset></form>
<div id="about">
...
</div>
</div>
with styles something like:
#ads { position: absolute; right: 0; width: 160px; }
#content { margin-right: 160px; }
#video { float: right; width: 440px; }
#poll, #subscribe { margin: 0 440px 0 0; }
#about { clear: right; }
I'd also advise you to move the JavaScript logic out from the inline event handler attributes you currently have to separate JavaScript blocks (either embedded <script> blocks or linked external scripts). Especially for the multi-line event handlers: quite apart from the horrible maintainability of mixing scripts into markup, in HTML/XML newlines in attributes are not preserved. That means your newlines in JS code are converted into spaces, so if you miss a single semicolon your script will break or behave oddly (where usually in a script block or external script, the auto-newline-semicolon-fallback would save you).
ie.
onsubmit="
var inputs = this.getElementsByTagName('input');
var checkedValue;
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute('type') == 'radio' && inputs[i].checked)
{
checkedValue = inputs[i].value;
}
}
/*makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+checkedValue, processAjaxResponse);*/
makeAjaxGetRequest('/poll/ajax-vote.php?vote='+checkedValue, processAjaxResponse);
return false;"
instead:
<form id="pollForm" method="post" action="/poll/form-vote.php>
...
</form>
<script type="text/javascript">
document.getElementById('pollForm').onsubmit= function() {
var checkedValue= getRadioValue(this.elements.vote);
makeAjaxPostRequest('/poll/ajax-vote.php', 'vote='+encodeURIComponent(checkedValue), processAjaxResponse);
return false;
};
function getRadioValue(fields) {
for (var i= fields.length; i-->0;)
if (fields[i].checked)
return fields.value;
return '';
};
</script>
Always allow only POST requests for active forms that do something positive. Always use encodeURIComponent when creating query strings. Don't use getAttribute as it doesn't work right in IE; use direct DOM Level 1 HTML properties instead, eg. input.type.
if you are referring to the space in between the "Monthly poll" and "Monthly Magazine" boxes, it is not caused by padding...
What's happening is the td containing the flash video is too tall, and because it has a rowspan of 2, the two tds on the left are being adjusted to the height of the tallest td (aka the video box)
One solution is to add another tr below the first 2 rows,
let it have an empty td,
change the rowspan of the video box to 3
And then the redundant space you see in between the first 2 boxes will be transfered to the empty td you have just created.
OR
I would suggest you bite the bullet and start using CSS rather than tables for layout, purely because:
We are in the second decade of the 21st century
It is much more flexible to use CSS
It will be much easier for you change the look of the site in th future, without touching the markup.
It will be much better for search engines to index your site content
Assistive software such as screen readers can see your content in the order they are supposed to be seen
You will be one happy developer in the end
Controlling table cell padding with css can be tricky. Try adding these two css rules:
table { border-spacing: 0; }
table td { padding: 0; }
Unfortunately, the border-spacing rule isn't supported by all browser, so you may have to add cellpadding="0" and cellspacing="0" as an attribute to the table.
I've tried with the follow HTML code which is merely a more complete version of your code fragment. However, I'm seeing no padding as you have described. So my best guess is that it's caused by some other CSS rules you defined elsewhere.
<!doctype html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
*PROBLEMATIC CELL*
</td>
<td rowspan="2">
</td>
<td rowspan="3">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</body>
</html>