Home/ Questions/Q 6732265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:37:45+00:00

I read in some forums that to make an html table look disabled is

  • 0

I read in some forums that to make an html table look disabled is to add a layer of div. My problem is I don’t know how to do it.

I have 3 questions:

  1. How will I set the div height that it will automatically adjust to the table height whenever the table increases its height when a new row is added.

  2. How will I make the div cover the table. I don’t know how to layer html elements.

  3. How am I going to code the javascript that will make my table look disabled when I click ‘Disable’ button and enable it again when I click ‘Enable’ button.

tabledisabletest.html

<html>
<head>
<script type="text/javascript">

</script>
<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }

 #disabler {
  width: 100%;
  height: 200px;
  background-color: #bbb;
  opacity:0.6;
 }
</style>
</head>

<body>

 <div id="disabler"></div>

 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>Tom</td>    
    <td>UK </td>
   </tr>
   <tr>
    <td>Henrik</td> 
    <td>Denmark</td>
   </tr>
   <tr>
    <td>Lionel</td> 
    <td>Italy</td>
   </tr>
   <tr>
    <td>Ricardo</td>    
    <td>Brazil</td>
   </tr>
   <tr>
    <td>Cristiano</td>  
    <td>Portugal</td>
   </tr>
  </tbody>
 </table>
 <input type="button" onclick="disable = true;" value="Disable" />
 <input type="button" onclick="disable = false;" value="Enable" />
</body>
</html>

I have the div disabler to do the disabling but I can’t make it cover the table.

Please help me with this. I’m so new to this thing.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want the disabler element to overlay your table, add a negative bottom-margin to it. Also, set opacity to a value lower than 1, to not completely cover (hide) the table behind it.

     #disabler {
     opacity: 0.5;
     margin-bottom: -200px;
 }

    Since you’ve mentioned that you’re doing this for educative purposes, I won’t give the full solution. See this fiddle to get started.

    If you want to make a text look “unselectable”, use the following CSS:

    -webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
    • 0