Relative Positionierung ohne eigene Platzbeanspruchung

Bluecaspar · 03.09.2014

Hi,

ich möchte in einer Tabelle Textfelder nachträglich erzeugen und sie etwas versetzt über den Spaltenüberschriften schweben lassen. Leider beanspruchen sie immer noch selber Platz und verändern mir die gewünschte Spaltenbreite. Kann ich die Textfelder auch so erzeugen, dass sie selber keinen Platz mehr beanspruchen, so das die anderen Elemente in ihrer Positionierung nicht beeinflusst werden.

HTML:

<html>
<head>
 <style>
 
  input {
   background-color: White;
   border:2px solid blue;
   width: 100px;
   position:relative;
   top: 14px;
   left: 14px;
  }
    
  span {
   float: left;
  }
  
  td, th {
   border: 1px dashed grey;
  }
  td {
   width: 140px;
  }
  
 </style>
</head>
<body>
 <table>
  <tr>
   <th style="width:28px">
    <button>+</button>
   </th>
   <th>
    <input id="textbox1" type="Text" value="Textbox 1"/> 
    <span>Column 1</span>
   </th>
   <th style="width:28px">
    <button>+</button>
   </th>
   <th>
    <input id="textbox2" type="Text" value="Textbox 2"/> 
    <span>Column 2</span>
   </th>
  </tr>
  <tr>
   <td colspan="2">1</td>
   <td colspan="2">x</td>
  </tr>
  <tr>
   <td colspan="2">2</td>
   <td colspan="2">y</td>
  </tr>
  <tr>
   <td colspan="2">3</td>
   <td colspan="2">z</td>
  </tr>
 </table>
</body>
</html>