I'm in need of some assistance once again. I've been trying to update my current HTML table so that it highlights on hover and includes ellipsis when the text is too long. However, I seem to be having trouble getting both features to work simultaneously. The ellipsis works fine on its own, but once I add the highlight on hover, it stops working. I attempted a different approach by adding some script, which fixed the hover highlighting issue but caused the ellipsis to malfunction.
If you have any expert advice or tips on how to incorporate both features into my code below, I would greatly appreciate it. Thank you in advance for your help.
Here is the script for the hover highlight:
<script>
if (!('select' in HTMLTableCellElement)) {
HTMLTableCellElement.prototype.select = function() {
var range = document.createRange();
range.selectNodeContents(this);
window.getSelection().addRange(range);
}
}
</script>
CSS:
<style type="text/css">
table{
table-layout: fixed;
width: 170px;
height: 35px;
}
.table {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #9dcc7a;border-collapse: collapse;}
.table th {font-size:12px;background-color:#abd28e;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;text-align:left;}
.table tr {background-color:#ffffff;}
.table td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #9dcc7a;}
.table tr:hover {background-color:#ffff99;}
.table td text-overflow:
.table td width: 225px;
.table td white-space: nowrap;
::selection {
background-color: orange;
color: blue;
}
</style>
Table sample:
<table class="table" border="1">
<tr><th>Header</th></tr>
<tr><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td><td onclick="this.select()">This sentence should show ellipsis. This sentence should show ellipsis.</td></tr>
I am eagerly awaiting your response.
Kind regards,
Jason