How to control table size entirely through html and CSS?-CodePudding

I'm new to web developing and I am stuck in a task that I'll have to make a table inside of a form, however, I'm facing difficulties placing 3 text boxes next to each other with words like "country code, City code and phone number" above it in the same section. I am using for the table and for each input and label.

Your Phone
Country code - City code - Phone number

CodePudding user response：

u can use colspan or rowspan in your table

example:

<table>
 <tr>
   <th colspan="3">Your Phone</th>
 </tr>
 <tr>
   <td>Country code</td>
   <td>City code</td>
   <td>Phone number</td>
 </tr>
</table>

view more at w3school

CodePudding user response：

Your Q is too general. You could achieve this by "display: grid", "display: flex". In modern web no need for tables related to layouts. Watch online tutorial/course about CSS layouts.

CSS LAYOUT: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

Also please read this: https://stackoverflow.com/help/how-to-ask

One solution by flexbox:

.form_layout{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form_col{
  border: 1px solid red;
  flex-basis: 30%;
}

input{
  flex-basis: 100%;
  min-width: 0;  
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 400px) {
  /* stack on mobile (change the max-width) */
  .form_col{
    flex-basis: 100%;
  }
}

<div >
  <div >
    1
  </div>
  <div >
    2
  </div>
  <div >
    3
  </div>
</div>

Form example:

.form_layout{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.form_col{
  border: 1px solid red;
  flex-basis: 31%;
}

input{
  flex-basis: 100%;
  min-width: 0;  
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 400px) {
  /* stack on mobile */
  .form_col{
    flex-basis: 100%;
  }
}

[type="submit"]
{
  margin-top: 12px;
}

<form>
  <div >
    <div >
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>  
    </div>
    <div >
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe">
    </div>

    <div >
      <label for="email">email:</label><br>
      <input type="text" id="email" name="email" value="[email protected]">
    </div>
  </div>
  <input type="submit" value="Submit">
</form>