I'm building a .xslt file to attach to my XML document. I use the following code to display my color code legend:
<footer width="100%">
<table>
<tr>
<td><div style="background-color:#90EE90;width:15px;height:15px;border:1px solid #000;"></div>Nouveauté</td>
<td><div style="background-color:#AFEEEE;width:15px;height:15px;border:1px solid #000;"></div>Modifié</td>
<td><div style="background-color:#FFF;width:15px;height:15px;border:1px solid #000;"></div>Normal</td>
</tr>
</table>
</footer>
Current result
Unfortunately, I get the following result:
Wanted result
Where as my actual result should look like this:
I also tried using list item tags in an unordered list with an inline style display. Also tried making the list items float left, got the same result... I'm not sure why it's not displaying correctly.
You can either use a span instead of div or use float:left on div
Check this fiddle
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! :)
Is there a way to specify column width here?
Hi, I'm trying to style a table, but I don't know how to specify column width. I've read that the way to do it is by using CSS: <td style="width:130px">
I'm using xampp and I only use a PHP file.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>$item</td>
<td><img src='item_image_folder/img'></td>
</tr>
</table>
</body>
</html>
what the table looks like
Category 1
item_name image
item_name image
Category 2
item image
item image
Category 3
long_item_name image
<style>
td {
width:130px;
}
</style>
this is using css styling, specifying the width for the <td>'s
You can use like this.
<table>
<tr>
<th width="200"></th>
<th width="100"></th>
<th width="100"></th>
</tr>
</table>
You can put width attribute with pixel / % format.
(example: width="50")
(example: width="50%")
Reference : https://www.w3schools.com/tags/att_table_width.asp
The problem was in styling each <td>'s width within an echo statement. The solution was to simply use single quotes instead of double quotes
<td width='130px'>$item</td> this one was correct inside of echo"";
<td width="130px">$item</td>
I could also use <td id='cell1'>$item</td> and and style with:
<style>
td#cell1{width:130px;}
</style>
Yes, all you'd need to do is select the cell(s) you want to widen, then set this attribute in your <td> tag: width="40px" (example only - change it however you like). You can also change height in the same way, with the height="20px" attribute.
I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?
This is my html:
<div>
<table>
<tr><td colspan="2">Btn1</td></tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
How they look like:
Thank you.
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
Swap the id for a class.
In the HTML:
<td>Btn</td>
In the CSS:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
<div>
<table>
<tr>
<td colspan="2">Btn1</td>
</tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
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; }
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>