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
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>
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.
Below you find an excerpt of code used to screen scrape an economic calendar.
The HTML page that it parses using XPath includes this row as the first rown
in a table. (Only pasted this row instead of the entire HTML page.)
<tr class="calendar_row newday singleevent" data-eventid="42064"> <td class="date"><div class="date">Sun<div>Dec 23</div></div></td> <td class="time">All Day</td> <td class="currency">JPY</td> <td class="impact"> <div title="Non-Economic" class="holiday"></div> </td> <td class="event"><div>Bank Holiday</div></td> <td class="detail"><a class="calendar_detail level1" data-level="1"></a></td> <td class="actual"> </td> <td class="forecast"></td> <td class="previous"></td> <td class="graph"></td> </tr>
This code that selects the first tr row using XPath:
var doc = new HtmlDocument();
doc.Load(new StringReader(html));
var rows = doc.DocumentNode.SelectNodes("//tr[#class=\"calendar_row\"]");
var rowHtml = rows[0].InnerHtml;
The problem is that rowHtml returns this:
<td class="date"></td> <td class="time">All Day</td> <td class="currency">EUR</td> <td class="impact"> <div title="Non-Economic" class="holiday"></div> </td> <td class="event"> <div>French Bank Holiday</div> </td> <td class="detail"><a class="calendar_detail level2" data-level="2"></a></td> <td class="actual"> </td> <td class="forecast"></td> <td class="previous"></td> <td class="graph"></td>
Now you can see that the contents of the td column for the date vanished! Why?
I've experimented many things and stumped as to why it drops the contents of that column.
The other columns have content that it keeps. So what's wrong with the date column?
Is there some kind of setting or property somewhere to cause or prevent dropping contents?
Even if you haven't got a clue what's wrong but have some suggestions of a way to investigate it more.
Like #AlexeiLevenkov mentioned, you must be selecting a different row than what you want. You've pruned too much of essential problem away in an effort to simplify, but it's still clear what's wrong...
Consider that your input document might basically look like this:
<?xml version="1.0" encoding="UTF-8"?>
<table>
<tr class="calendar_row" data-eventid="12345">
<td>This IS NOT the tr you're looking for</td>
</tr>
<tr class="calendar_row newday singleevent" data-eventid="42064">
<td>This IS the tr you're looking for</td>
</tr>
</table>
The test #class="calendar_row" won't match against the tr you show, but it will match against the first row.
You could change your test to be contains(#class,'calendar_row') instead, but that would match both rows. You're going to have to identify some content or attribute that's unique to the row you desire. Perhaps the #data-eventid attribute would work -- can't tell without seeing your whole input file.
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.