Geek Answers Handbook

Minimum size limit to html tables

I have a problem, I need to create tables with unlimited stretch size, but I need to define min-width for them so that I can see them. When they shrink to 50% of their original size, they will stop shrinking in the browsers window and scroll to see them. I hope you understand, here is my html code:

.vnutro {
  margin-left: 100px;
  margin-top: 20px;
  max-width: 90%;
  min-width: 50%;
}
th {
  border: 1px solid black;
  max-width: 100px;
  min-width: 60px;
}
.th1 {
  width: 25%;
}
.th2 {
  width: 65%;
}
.th3 {
  width: 2%;
}
.th4 {
  width: 2%;
}
td {
  border: 1px solid black;
  text-align: left;
}
<div class="vnutro" style="overflow-x:auto;">

  <a name="1072016">
    <!--tabulka 1-->
    <table>
      <tr>
        <th class="th1">nadpis1</th>
        <th class="th2">nadpis 2</th>
        <th class="th3">nadpis 3</th>
        <th class="th4">nadpis 4</th>
      </tr>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
        <td>
          <form action="">
            <input type="checkbox" name="checkbox" value="box">
        </td>
      </tr>
    </table>

    <a name="1172016">
      <!--tabulka 2-->
      </br>

      <a name="1272016">
        <!--tabulka 3-->

</div>
Run codeHide result
+4
source share
4 answers

This pattern extends to its full width, but has a minimum width of 400 pixels, and the columns can have the same or different widths.

Demo screenshot

table {
  min-width: 400px;
  width: 100%;
}
th {
  border: 1px solid black;
}
th {
  width: 25%;
}
td {
  border: 1px solid black;
  text-align: left;
  vertical-align: top;
}
/* table 2 */
[name="1172016"] ~ table th {
  width: 20%;
}
[name="1172016"] ~ table th:nth-child(1) {
  width: 40%;
}
<div class="vnutro" style="overflow-x:auto;">

  <a name="1072016"></a>
  <!--tabulka 1-->
  Table 1
  <table>
    <tr>
      <th>nadpis1</th>
      <th>nadpis 2</th>
      <th>nadpis 3</th>
      <th>nadpis 4</th>
    </tr>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>
        <form action="">
          <input type="checkbox" name="checkbox" value="box">
        </form>
      </td>
    </tr>
  </table>

  <a name="1172016"></a>
  <!--tabulka 1-->
  <br>
  Table 2
  <table>
    <tr>
      <th>nadpis1</th>
      <th>nadpis 2</th>
      <th>nadpis 3</th>
      <th>nadpis 4</th>
    </tr>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>
        <form action="">
          <input type="checkbox" name="checkbox" value="box">
        </form>
      </td>
    </tr>
  </table>

</div>
Run codeHide result
+2
source

Firstly, in your mentioned links. There are so many errors in the code. Therefore, I am correcting this.

. .

:

 <div class="vnutro" style="overflow-x:auto;"> 
     <a name="1072016">
     <!--tabulka 1-->
     <table border="1" cellspacing="0" cellpadding="0" border="0" width="500">
         <tr>
             <th class="th1"> nadpis1 </th>
             <th class="th2"> nadpis 2 </th>
             <th class ="th3"> nadpis 3 </th>
             <th class="th4"> nadpis 4 </th>
         </tr>
            <td width="100"> text1 </td>
            <td width="100"> text2 </td>
            <td width="100"> text3 </td>
            <td width="100">
                <form action="">
                    <input type="checkbox" name="checkbox" value="box">
                </form>
            </td>
     </table>
     </a>
     <a name="1172016"></a>
     <!--tabulka 2-->
     <br/>
     <a name="1272016"></a>
     <!--tabulka 3-->
 </div>

fiddle.

+1

If I understand your problem correctly, try adding the following to your CSS: to make sure that this gives the desired result.

table {
   width: 100%;
   table-layout: fixed;
}

More details here .

0
source

Here is my whole code if it helps you. HTML: https://paste.ee/p/kkFTh CSS: https://paste.ee/p/UlbZz

0
source

More articles:


All Articles