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>
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>
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 am unable to explain my question. But if anyone understood what I want please do edit.
I have following code
<table style="width:100%">
<tr style="border-style: none solid solid solid; border-width: thin; border-color: #C0C0C0; background-color: #FFFFFF">
<td class="style4" width="100%"
style="border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #C0C0C0"
align="left">
<h1 style="font-style: normal; font-weight: normal;">
<%=t.getTitle() %>
</h1>
Whenever t.getTitle() returns a larger string that is in one line, my heading goes out of the page (overflow). I want to wrap the content of h1 into td having it.
Like stackoverflow.com uses for its question titles.
Quite seldom, text overflows text-boxes. In such cases, one can force the browser to change wrapping. web designer wall explains it here:
.break-word {
word-wrap: break-word;
}
Changes rendering behavior like this:
Additionally, while maybe not helpful in the current situation, one may hide any overflow using CSS:
style="overflow:hidden;"
PS: Actually, I wonder, if word-wrap is the root cause your problem.
1000 words will be wrapped.
1 word with 1000 character won't be wrapped.
Try:
word-wrap:break-word;
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 working on a website (C#, .Net 3.5 Framework) and looking for an alternate of Popup window to avoid the popup blocker settings of browsers or in other words want to remove the dependency of popup blocker for Website. Many users disable them because they don't like it.
I am using Master page for Menus and common interface of website.
But all the requirements are same.
Overlapped window
Common Interface/component that can be used to display the content of other HTML/ASPX page
Value can be passed and returned to the Opener Window.
Which is the best option for this scenario?
Thanks.
Your best bet is javascript, maybe modal plugin of jquery, but... The problem is, that it isn't 100% reliable as well. Many people disable javascript or maybe don't have a browser with that js (some older mobile phones etc.).
I have found a way, as an alternate of popup window.
Style Sheet (Popup related CSS)
Purpose: CSS for popup window
.PopupOuterDiv
{
height:100%;
width:100%;
top:0px;
left:0px;
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
z-index:50;
}
.PopupInnerDiv
{
position:fixed;
background-color:#ffffff;
z-index:50;
left:25%;
right:25%;
top:25%;
border-right: #0066ff 5px solid;
border-top: #0066ff 5px solid;
border-left: #0066ff 5px solid;
border-bottom: #0066ff 5px solid;
font-family: Arial;
}
.PopoupTitle
{
background-color: #0066ff;
height:25px;
color: white;
}
.PopoupButton
{
color: #ffffff;
width:20px;
border:white 1px solid;
background-color: #663300;
}
Master Page
Purpose: Contains the Common code for popup
1. Create 1 Div for Outer faded Effect
2. Create Div as container or popup Window
3. Create Iframe inside a container DIV and assign the URL.
<div class="PopupOuterDiv" runat="server" id="PopupOuterDiv" style="display:none;"></div>
<div class="PopupInnerDiv" runat="server" id="PopupInnerDiv" style="display:none;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="PopoupTitle">
<td id="PopoupTitle"></td>
<td align="right">
<input class="PopoupButton" type="Button" value="X" onclick="closePopup();" />
</td>
</tr>
<tr style="height:8px;" ><td></td></tr>
<tr>
<td colspan="2">
<iframe id="PopupIframe" src="" runat="server" height="300px" width="480px"></iframe>
</td>
</tr>
</table>
</div>
JavaScript to open and close the Popup
function closePopup()
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = 'none';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = 'none';
}
function openPopup(PopupTitle, PopupURL)
{
document.getElementById('<%=PopupOuterDiv.ClientID%>').style.display = '';
document.getElementById('<%=PopupInnerDiv.ClientID%>').style.display = '';
document.getElementById('PopoupTitle').innerText = PopupTitle;
document.getElementById('<%=PopupIframe.ClientID%>').src = PopupURL;
}
Content Page
Call the popup window from any content page.
openPopup('My Custom Popup', '../aspx/User.aspx');