td fixe %Breite, Scrollbalken nur wenn nötig von mathefritz, 10.09.2017 13:40

td fixe %Breite, Scrollbalken nur wenn nötig

mathefritz 10.09.2017 13:40

Danke für Fisch und Angel;
aber ich hoffe doch,
das Folgende läßt sich so ändern das es auch bei vernünftig verringerter Fensterbreite funktioniert

<!DOCTYPE html><html lang="de"><head><meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PREISLISTE</title>
 <style>
       .plz{width:  2.5%;}               /* Platzhalter 4* 2.5%      */
       .dt0{width: 30%; border:1px solid black; /* +  3*30.0% = 100% */
                vertical-align:top;
        }
       .tdtop{color: red; text-align:center; border-bottom: 1px solid black;}
       .tdmid{            text-align:center; border-bottom: 1px solid black;
                                             border-right : 1px solid black;
        }
       .tdmdr{            text-align:right ; border-bottom: 1px solid black;
                                             border-right : 1px solid black;}
       .tdrgt{            text-align:center; border-bottom: 1px solid black;}
       .green{background: lightgreen;}
</style>
</head>
<body           style="width:100%;">
  <table        style="width:98%; height:50em; border-collapse: collapse;
   table-layout:fixed;
        display:inline-table;">
   <tr>
      <td class="plz">
      <td class="dt0">
          <div style="overflow-x:auto; text-align: center;padding-top:0.2em;" 
          >Produktanalyseliste(Ausschnitt)
         </div>
         <table width="100%">
            <tr style="max-width:100%;">
                <td class="tdtop">Artikel</td>
                <td class="tdtop">Leistung</td>
                <td class="tdtop">Preis</td>
                <td class="tdtop">gängig?</td></tr>
            <tr><td class="tdmid green">BU-EIN-Teil</td>
                <td class="tdmid green"      >Gutachten mit 15 Messergebnissen &amp;
                                   3 Endergebnissen</td>
                <td class="tdmdr green">300,00€</td>
                <td class="tdrgt green">Ja</td></tr>
            <tr><td class="tdmid">BU-Zwei-Teile</td>
                <td class="tdmid">Gutachten mit 2x15 Messergebnissen &amp;
                                  2x3 Endergebnissen</td>
                <td class="tdmdr">600,00€</td>
                <td class="tdrgt">Ja</td></tr>
            <tr><td class="tdmid green">BU-Zwei-Teile Baugruppe</td>
                <td class="tdmid green">Gutachten mit 36 Messergebnissen &amp;
                                        3 Endergebnissen</td>
                <td class="tdmdr green">900,00€</td>
                <td class="tdrgt green">Ja</td></tr>
        </table>
     </td>
      <td class="plz">
     </td>
      <td class="dt0">
     </td>
      <td class="plz">
     </td>
      <td class="dt0">
     </td>
  </tr>
 </table>
</body>
</html>

Ich habe auch eine flex Lösung angedacht, komme da aber noch weniger weit,
Entfernen der Auskommentierung bringt alles durcheinander.

<!DOCTYPE html><html lang="de"><head><meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PREISLISTE</title>
 <style>
       .inrtab{border:1px solid black; width:30%; height:100%;}
</style>
</head>
<body     style="width:100%;">
obberhalb
<div style="width:100%; justify-content: space-evenly;
           height: 20em; 
          display: flex; align-items: flex-start;"

>

   <table class="inrtab">
    <tr><th style="colspan:4; text-align:center;
            vertical-align:top;"
        >Produktanalyseliste(Ausschnitt)</th
        ></tr> <!--
    <tr><td>Artikel</td>
        <td>Leistung</td>
        <td>Preis</td>
        <td>gängig?</td> -->
   </tr>
  </table>
   <table class="inrtab"><tr><td> T </td></tr></table>
   <table class="inrtab"><tr><td> T </td></tr></table>
</div>
<br>unterhalb

 </body></html>

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

mathefritz: td fixe %Breite, Scrollbalken nur wenn nötig

Beitrag lesen

td fixe %Breite, Scrollbalken nur wenn nötig

td fixe %Breite, Scrollbalken nur wenn nötig