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).
Related
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>
I'm facing a strange issue where the table header gets cut off(represented by the yellow part which is about 20px) and hence also the text:
As per my investigation this is because this is sort of reserving some space for a vertical scrollbar(although it never shows up in the header section). This becomes apparent when the table data is large enough to introduce a scrollbar(which also occupies a width of about 20px) or when I zoom into the page but like I said, the scrollbar appears only in the data section:
I'm using Razor Syntax(Custom Helper Methods) to create the table and can't find any issue in my code for this particular screen from where this problem might be arising.
FYI this issue persists across multiple browsers(I've tried Chrome, Edge & IE)
I've done a temporary fix where in I've introduced a div within the last header column and kept some space between them so that it is the empty space which gets trimmed off and not the text. But this is not a permanent solution.
Can someone please guide?
You can give your table the css property "overflow-x: scroll;" so that you can scroll to see it instead of it being cut off. You can also set the padding to have less space between everything inside of the boxes in the table. You can set the width and max-width property of the table as well. I hope this helps.
<!doctype html>
<html>
<head>
<title> Try It Yourself </title>
<style type="text/css">
table {
table-layout: fixed;
width: 110%;
border-collapse: collapse;
font-family: sans-serif;
overflow-x: scroll;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 0px;
text-align: center;
}
/* selects the first th element */
thead th:nth-child(1) {
width: 30%;
}
/* selects the second th element */
thead th:nth-child(2) {
width: 30%;
}
/* selects the third th element */
thead th:nth-child(3) {
width: 40%;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Heading </th>
<th> Heading </th>
<th> Heading </th>
</tr>
</thead>
<tbody>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
<tr>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
<td> The overflow will be seen by scrolling</td>
</tr>
</tbody>
</table>
</body>
</html>
why does :
<table style="border:1px solid black; " 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>
<th style="border:1px solid black;" scope="col">#T("Code")</th>
<th style="border:1px solid black;" scope="col">#T("Product")</th>
<th style="border:1px solid black;" scope="col">#T("Unit Price")</th>
<th style="border:1px solid black;" scope="col">#T("Quantity")</th>
<th style="border:1px solid black;" scope="col">#T("Value")</th>
</tr>
</thead>
<tbody>
look like:
I want to show all the borders of all the cells?
Should the style in the <table> have done this?
When using css you can set the border of a table and it's cells like this
table, th, td
{
border: 1px solid black;
}
Use border="1" in your table like this <table border="1">
Demo JsFiddle Using border="1"
Demo JsFiddle Using style="border:1px solid black;"
There is a difference between Table border and css border. To apply border to each cell you have to use Table border using table property called border or apply css border to each cell of the Table. To learn more please visit following LINK
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 would not say I wasted my time, but spent around few hours changing this. But in vain. Could some one please help me out.
In the following code:
I need to use break in between Disable Location(Title) and the gridview
I want the border color of grid to none. I do not want any color.
I want both the buttons Disable or deactivate and Cancel to be displayed just below the gridview. and in the middle of the page.
<div style="display: block; background: url(images/reusable_blue_bg.jpg) repeat-x 0 -15px;
border-left: #88b9c7 1px solid; border-bottom: #88b9c7 1px solid; border-top: #88b9c7 1px solid;
border-right: #88b9c7 1px solid; padding: 0px 2px; height: 236px; min-height: 236px;
height: auto; margin-left: auto; margin-right: auto;">
<table align="center" style="width: 554px; border-top-style: none; border-right-style: none;
border-left-style: none; border-bottom-style: none" id="TABLE1">
<tr>
<td align="center" colspan="5" style="font-weight: normal; font-size: 20px; margin: 0px;
font-family: Arial; color: #1e7c9b;">
Disable Location</td>
</tr>
I need number 1 over here..
<asp:GridView ID="disableloc" runat="server" AutoGenerateColumns="False" DataKeyNames="LocationName"
DataSourceID="" AllowPaging="True" EnableViewState="true" BorderStyle="None">
i want 2 over here, i guess
</asp:GridView>
I want 3 in here..
<tr align ="center" style="position:fixed">
<asp:ImageButton ID="btnDisable" runat="server" ImageAlign="Middle" ImageUrl="~/images/green-deactivate.gif" OnClick="btnDisable_Click"
ValidationGroup="group1" />
<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/images/cancel.gif" OnClick="btnCancel_Click" />
</tr>
</table>
</div>
Use padding-bottom in the header td style to get the proper spacing.
Use gridlines="None" on the GridView.
Put the Gridview and the buttons in td:s to place them properly.
This is rather basic HTML/CSS knowledge (nothing wrong with that), but investigating basic information sources may help you help yourself.
As to your specific items:
A 'break' can be as simple as a <br /> statement between the controls
if you don't want colors: #88b9c7 and similar-looking statements are colors.
As you're using a table, positioning the buttons below your grid can be done by placing them in the correct <tr> / <td>
For #1, try using margin or padding on the td, or wrap "Disable Location" in a span (or something) and style its margin/padding to give some space.
For #2, try setting Gridlines="None" on the GridView.
For #3, make sure you have a <td> inside the <tr>, and try using text-align:center on either the td or a div wrapping the buttons. Alternatively, don't put it in the table, just wrap them in a div with text-align:center, right under the table (do you need the table at all?)