How to make html look disabled?

Question

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:

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.
How will I make the div cover the table. I don't know how to layer html elements.
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.

<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.

Answer 1

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;

Answer 2

You will have to place the div disabler on top of the table.

You can do so by absolutely positioning the div . I added a new div, tableContainer enveloping the disabler div and the table, and absolutely positioning the div.

<div id="tableContainer">   <!-- New Div-->
   <div id="disabler"></div>
   <table>....<table>
</div>

Add position: absolute; to the #disabler

And most importantly write the javascript to display and hide the div:

function disableTable()
{
  document.getElementById("disabler").style.display = "block";
}

function enableTable()
{
  document.getElementById("disabler").style.display = "none";
}

Live Example: http://jsbin.com/icuwug

How to make html look disabled?

Question

2 answers

solution1
15 ACCPTED 2011-10-27 14:00:33

solution2
1 2011-10-27 14:01:22

How to make html look disabled?

Question

2 answers

solution1 15 ACCPTED 2011-10-27 14:00:33

solution2 1 2011-10-27 14:01:22

solution1
15 ACCPTED 2011-10-27 14:00:33

solution2
1 2011-10-27 14:01:22