I have a simple table styled with bootstrap I am trying to display in the Popup of a chrome extension. The on-hover styling that should be applied to each row stops working towards the bottom of the list.
I can load up the popup.html in its own window (via chrome-extension://<my_extension_id>/popup.html and the styling renders just fine.
Here's a pared down version of what my popup.html looks like:
<html>
<head></head>
<body style="width: 200px;">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<table class="table table-sm table-hover">
<tbody>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test (hover styling breaks here)</td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
</tr>
</tbody>
</table>
</body>
I would expect there to be no difference between what chrome's popup window renders and what renders when viewing the popup in its own page. I have experienced similar other anomalies trying to build the styling for my popup. I'm hoping that if I can find an answer to this question, I can apply it to the other issues I've seen.
EDIT: here are some .gifs demonstrating the difference in behavior:
In Popup
In Page
I should also note that I can use chrome DevTools to manually set the :hover property, the table row's styling updates correctly.
Related
I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows
// <?!= include('stylesheet'); ?>
I did this. I get a table with with being a plain text.
How to make the script actually process CSS styles?
gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
stylesheet.html file with CSS for tables
<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>
stundu_laiki.html with a table
<!DOCTYPE html>
<html>
<head>
<base target="_top">
**<?!= include('stylesheet'); ?>**
</head>
<body>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:10</td>
</tr>
<tr>
<td>2.</td>
<td>9:20 - 10:00</td>
</tr>
<tr>
<td>3.</td>
<td>10:10 - 10:50</td>
</tr>
<tr>
<td>4.</td>
<td>11:05 - 11:45</td>
</tr>
<tr>
<td>5.</td>
<td>12:00 - 12:40</td>
</tr>
<tr>
<td>6.</td>
<td>13:10 - 13:50</td>
</tr>
<tr>
<td>7.</td>
<td> 14:00 - 14:40</td>
</tr>
<tr>
<td>8.</td>
<td>14:50 - 15:30</td>
</tr>
<tr>
<td>9.</td>
<td>15:35 - 16:15</td>
</tr>
</table>
<h2> Saīsināto dienu stundu laiki</h2>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:00</td>
</tr>
<tr>
<td>2.</td>
<td>9:10 - 9:40</td>
</tr>
<tr>
<td>3.</td>
<td>9:50 - 10:20</td>
</tr>
<tr>
<td>4.</td>
<td>10:35 - 11:05</td>
</tr>
<tr>
<td>5.</td>
<td>11:20 - 11:50</td>
</tr>
<tr>
<td>6.</td>
<td>12:20 - 12:50</td>
</tr>
<tr>
<td>7.</td>
<td> 13:00 - 13:30</td>
</tr>
<tr>
<td>8.</td>
<td>13:40 - 14:10</td>
</tr>
<tr>
<td>9.</td>
<td>14:15 - 14:45</td>
</tr>
</table>
</body>
</html>
Use createTemplateFromFile instead then evaluate your html. See final script below.
Final script:
function openDialog() {
var html = HtmlService.createTemplateFromFile('stundu_laiki')
.evaluate()
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
Output:
I found that some properties can't be used in Wordpress.
The effect below is what I wanted in Wordpress.
To edit in Text mode in Wordpress.
<table border="4" bordercolor="red">
<tbody>
<tr>
<td>test</td>
<td>bash</td>
<td>vim</td>
</tr>
</tbody>
</table>
I found that border="4" bordercolor="red" can't work when to publish.
What I get is:
How to get the desired effect in my Wordpress?
.table,tr,td
{
border:solid 4px red !important;
}
<table class="table">
<tbody>
<tr>
<td>test</td>
<td>bash</td>
<td>vim</td>
</tr>
</tbody>
</table>
I am organizing a table in my web app. The rows are created in code. I created:
<table id="idTab" runat="server" class="table table-bordered table-striped">
<thead>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>Campo 1</td>
<td>Campo 2</td>
</tr>
</tfoot>
</table>
The project is developed in VB.net.
I need to add the lines via code inside the <tbody>. This does not happen unfortunately. In the compiled page tbody tag, tfoot, thead disappear and are left only the tr. How can I leave them? They heater it for the table template.
I'm new to this website I need your help.
I recently bought real space Wordpress theme.
When I try to add table in Wordpress pages, the table border is not visible. I already add border value 1.
I try few plugin also, still no use.
Please check below style.css, I don't know how to fix it. Please help me check this .css file.
Download .css file : https://www.dropbox.com/s/fu0kz8h93zwmpgv/Table.css?dl=0
Sorry for the delay.
In your wordpress theme bootstrap is there, so need to change anything.
Just you have to add class - "table table-bordered"
whenever you make table add given class
See given below snippet code for more clarification
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-bordered" >
<tbody>
<tr>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td></td>
<td>Testing</td>
</tr>
<tr>
<td>Testing</td>
<td></td>
<td>Testing</td>
<td>Testing</td>
</tr>
</tbody>
</table>
I'm in the middle of finishing off a responsive table for a website I'm building. The problem is that because of the html and body elements being displayed as table (due to being part of a sticky footer solution), the width of the tables containing div is not respecting the 100% width, when scaled down below 745px. Removing the display table from the html and body elements isn't an option due to the sticky footer. I would love to hear if anyone in the community has come across this issue and more importantly managed to find a solution/workaround?
See the link below to a pen with the table in question:
Codepen example
HTML:
<div id="opening-hours">
<div class="opening-inner">
<table>
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>Open gym</span><br>07.00-10.00</td>
<td><span>PT</span><br>07.00-18.30</td>
<td><span>Open gym</span><br>07.00-10.00</td>
<td><span>PT</span><br>07.00-18.00</td>
<td><span>Open Gym</span><br>07.00-10.00</td>
<td><span>Open Gym</span><br>10.00-12.00</td>
<td class="closed"></td>
</tr>
<tr>
<td><span>PT</span><br>10.00-17.00</td>
<td><span>Circuits</span><br>18.30-19.30</td>
<td><span>PT</span><br>10.00-16.30</td>
<td><span>Circuits</span><br>18.00-19.00</td>
<td><span>PT</span><br>10.00-18.00</td>
<td class="closed"></td>
<td class="closed"></td>
</tr>
<tr>
<td><span>Open gym</span><br>17.00-20.30</td>
<td><span>Open gym</span><br>19.30-20.30</td>
<td><span>Open gym</span><br>17.30-20.30</td>
<td><span>Open gym</span><br>19.00-20.30</td>
<td class="closed"></td>
<td class="closed"></td>
<td class="closed"></td>
</tr>
</tbody>
</table>
</div>
</div>
For the full code and working example see the Codepen example