This is how mine looks like
I want it like this
the first picture, it always happened when the there are many column in a table (eg: having 8 column per table) while the second picture only having like 5 column per table
i've tried using vertical - top but i might have done something wrong. both button also having different class.
Make a div and wrap the two icons and give some class then add this CSS to that div,
.that_div_class {
display: flex;
align-items: center;
justify-content: center;
}
After this, you can give other CSS to the two icons as you wish.
To ensure that the action column's icons are horizontally aligned, set a minimum width for the column. This will prevent the icons from being separated from each other horizontally.
Example for using Bootstrap:
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" style="min-width: 150px;">Action</th>
</tr>
</thead>
...
</table>
Related
I have the following structure:
<div>
<table>
<tbody>
<tr>
<th>1</th>
<!--and some columns-->
</tr>
<!--some datarows-->
<tr>
<td></td> <!--a lot of columns-->
</tr>
</tbody>
<table>
</div>
I want to fix the header.
I got number of links but all they having thead in structure as I am table control in C# can't have control over the structure and also I cannot re-write html markup dynamically (not allowed).
Now I can easily fix the tableheaderrow with style
position : fixed
But table contains scroll bars so the header comes outside the panel.
Any suggestion will be highly appreciated.
Using style attribute I want to show the cell borders of a table;
<table class="table-bordered table-striped table">
<colgroup>
<col id="Col1" />
<col id="Col2" />
<col id="Col3" />
<col id="Col4" />
<col id="Col5" />
</colgroup>
<thead>
<tr style="border:10px">
<th scope="col">#T("Code")</th>
<th scope="col">#T("Product")</th>
<th scope="col">#T("Unit Price")</th>
<th scope="col">#T("Quantity")</th>
<th scope="col">#T("Value")</th>
</tr>
</thead>
<tbody>
ATM looks like:
Tried something like:
<tr style="border:10px; border-style:solid; border-color:Black;">
but no joy
If you want the border on the cell, then add it to the cell not the row.
CSS:
td {
border: 1px solid black;
}
or inline:
<td style="border: 1px solid black;"></td>
if you want to display border of each cell then you need to just add an style attribute with following value :
<td style="border:1px solid Black;"></td>
syntax of the border property is :
border: width|style|color;
where value of style are :
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
As others have mentioned you probably want to style the td, not the tr. However, your styling of the tr should show something, so my guess is that your styles are being overridden from another css file, or something. Use Fire Bug, or Dev Tools in Chrome (Right click > inspect element) and you can see the styles on your td's. You can then see which are being overridden (1), which are being applied (2), and where they are coming from (3).
I generate a Gridview and, in two of the cells of each, there are two other Gridviews. This renders as a table and each row has a table in two of the cells.
I set the CssClass of each Gridview but, no matter what I do, the tables in the calls seem to inherit at least some of the css attributes applied to the containing table.
Is there a foolproof way of saying 'Ignore all the attributes of the table that surrounds this table'.
you could use more specific CSS selectors... e.g.:
<table class="outerTable">
<tbody>
<tr>
<td>This will be white text</td>
<td>
<table class="innerTable">
<tbody>
<tr>
<td>This will be black text</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table
.outerTable > tbody > tr > td {
color: #fff;
}
.innerTable > tbody > tr > td {
color: #000;
}
BLSully is right, the only good way to do this is through overwriting its inherited attributes. To overwrite an attribute, you need to have overriding code be more specific than other selectors. For a great article on specificity, read this:
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
I am using C# ASP.NET that uses html tables. The problem comes in to this specific panel that I am working with where my column inside the table is not expanding for what ever reason even though my other panels the colspan property works correctly except for this one.
Here are some screenshots to explain what is happening.
Not even though I am setting the colspan to what ever value the column does not expand. Also I know there is two tables within this panel and there is a reason to why I have two, so it's not a mistake. Basically I want the left button to stay left of the panel and secondly I want the right button ("Next") to be as far right of the page as possible.
Any ideas why this is happening or is there a better solution to this problem?
By the way I am using Google Chrome to test if this adds any value to the question.
Not sure why you are using ColSpan when you have only 1 row in second table. To achieve what you are expecting, do the following:
set Width="100%" in second table
in first "td" for back button, include "align=left"
in second "td" for next button, include "align="right"
colspan works with multiple rows; you are expecting it wrongly
<table id="tblButtons" runat="server">
<tr>
<td colspan="3">
column that covers three columns
</td>
<td align="right">
right button
</td>
</tr>
<tr>
<td>
column 1
</td>
<td>
column 2
</td>
<td>
column 3
</td>
<td>
column 4
</td>
</tr>
</table>
column 1, 2, 3 will be covered by the td having colspan="3"
There aren't 100 columns in your page, so that value is relatively worthless. You can (and should) use CSS to achieve your desired width. To have the table itself fill the page, you need to add a style="width:100%;" to it, then your cells will expand to split the difference.
colspan only changes how many columns in a table a cell takes up, not how wide it actually is. Use style="width:..." (or set it in CSS) to set the width. What's happening right now is your table is being divided into one hundred and one imaginary parts (the left side having one hundred parts, the right having one).
An example of using colspan correctly:
<table>
<tr>
<td colspan="2">
Hello world
</td>
</tr>
<tr>
<td>
Left
</td>
<td>
Top
</td>
</tr>
</table>
This is inline code of a .aspx page:-
<table>
<tr>
<td>Some static data</td>
<td>Text box control</td>
<td><div id="div1"></div></td>
</tr>
</table>
Third <td> has a div 'div1'. This div does not have any data most of time on that page. But sometimes i need to display some dynamic data there). Now problem is, if there is no data in div 'div1', firefox consider it as a space in it and takes approx. 5px space in browser. (But IE8 in compatibility view is fine)
What is the work around here for firefox?
I'd consider if you actually need the div - I guess you are filling it with data in certain circumstances by targetting the ID, by why not just target the table cell instead?
<table>
<tr>
<td>Some static data</td>
<td>Text box control</td>
<td id="div1"></td>
</tr>
</table>
Try setting all margins and padding to 0 at the start of your CSS.
*{
margin: 0;
padding: 0;
}
And then you can set those values explicitly where required.
That's because you have a padding applied to the td elements. You could do this: <td style="padding:0"><div id="div1" style="display:none; padding:1px;"></td>
And shift the padding to the div element and the hide it when it is empty. Firefox doesn't apply any padding to it in that case. But, it should still look like other tds when there is data applied to it.
It sounds like you need to reset your styles. There's a couple of good ones out there including Eric Meyer's CSS reset and Yahoo YUI2 CSS reset.