Fred007 Fred007 - 4 months ago 11
CSS Question

Limiting min size to html tables

I have a problem, i need to make tables with unlimited stretching size but i need to define min-width for them so i can see them. When they shrink to like 50% of their original size, they will stop shrinking with browsers window and scroll them to see. I hope you get the idea, 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>





Thanks,
Fred.

Answer

This sample stretch to full width but has a minimum width of 400px, and columns can have same or different width.

Fiddle demo

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>

Comments