Resize input size inside table

Asked

Viewed 537 times

-1

Test scenario

I have a table within a form, because I need to make a form aligning rows and columns to the inputs.

Example:

<table class="table table-bordered" style="font-size: 0.8rem">

	<thead>
		<th class="table-dark" colspan="11">Discriminação da operação</th>
	</thead>

	<thead>
		<th class="table-secondary">.</th>
		<th class="table-secondary">A A A</th>
		<th class="table-secondary">B B B</th>
		<th class="table-secondary">C C C</th>
		<th class="table-secondary">D D D</th>
		<th class="table-secondary">E E E</th>
		<th class="table-secondary">F F F</th>
		<th class="table-secondary">G G G</th>
		<th class="table-secondary">H H H</th>
		<th class="table-secondary">I I I</th>
		<th class="table-secondary">J J J</th>
	</thead>

	<tbody>
		<tr>
			<th class="table-secondary">Valores A</th>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
		</tr>
		<tr>
			<th class="table-secondary">Valores B</th>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
		</tr>
		<tr>
			<th class="table-secondary">Valores C</th>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
			<td><input type="number" name=""></td>
		</tr>
	</tbody>

</table>

Problem

I need to scale down a few inputs.

I tried to:

<td><input type="number" name="" width="10px"></td>

<td width="10px"><input type="number" name=""></td>

But I didn’t succeed.

  • How could these inputs decrease?
html

  • My beloved downvoter follower never fails! My fan :)

1 answer

1


You can select ins inputs by CSS and place one max-width. I don’t know if that’s what you wanted...

But first notice that use width="" direct tag is not recommended. W3C validator itself is error if you use the attribute width right in the tag. Using it this way is how it was done in the HTML4 and should be avoided, although it still works with some tags like canvas, img, iframe, etc, but what is currently indicated is to use style="width:xx;"

inserir a descrição da imagem aqui

Follow an example using the width by CSS

input {
    max-width: 50px;
}
<table class="table table-bordered" style="font-size: 0.8rem">

    <thead>
        <th class="table-dark" colspan="11">Discriminação da operação</th>
    </thead>

    <thead>
        <th class="table-secondary">.</th>
        <th class="table-secondary">A A A</th>
        <th class="table-secondary">B B B</th>
        <th class="table-secondary">C C C</th>
        <th class="table-secondary">D D D</th>
        <th class="table-secondary">E E E</th>
        <th class="table-secondary">F F F</th>
        <th class="table-secondary">G G G</th>
        <th class="table-secondary">H H H</th>
        <th class="table-secondary">I I I</th>
        <th class="table-secondary">J J J</th>
    </thead>

    <tbody>
        <tr>
            <th class="table-secondary">Valores A</th>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
        </tr>
        <tr>
            <th class="table-secondary">Valores B</th>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
        </tr>
        <tr>
            <th class="table-secondary">Valores C</th>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
            <td><input type="number" name=""></td>
        </tr>
    </tbody>

</table>

If you want to change the size of inputs only from one line you can put something like

tr:nth-child(2) input {
    max-width: 50px;
}
tr {
    text-align: center;
}

And you will get a result as in the image below

inserir a descrição da imagem aqui

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.