increase width and height of td cells in html

I am trying to increase the width and height of the td cells as per my requirement.

Here is my code:

<div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><?php echo $this->remarksForm->remarkType; ?></td>

                <td><?php echo $this->remarksForm->remark; ?></td>

                <td>

                    <?php  echo $this->remarksForm->id;

                    echo $this->remarksForm->save; ?>

                </td>

            </tr>

        </tbody>

    </table>

</div>

Here is the result of what I have now:
enter image description here

Here is an image of the result what I would like to get:

enter image description here

How can I accomplish this?

Thanks in advance.

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

I believe Yesterday I saw this question, anyway now the button is not dropping, I suppose you should be using the textarea tag instead of input type="text", remove any height from styling to it. use vertical-align: top for all elements.

– vssadineni
Nov 20 '18 at 8:09

you mean for all td need to use vertical align:top

– suresh
Nov 20 '18 at 8:10

okay then what about the middle one how can increase the height of that td

– suresh
Nov 20 '18 at 8:12

They are usually middle aligned right. If you want them to be aligned to top then try it. I do not like to move elements with negative margins and transform, translate just for alignment.

– vssadineni
Nov 20 '18 at 8:13

so how can i increse it..is there a any other way

– suresh
Nov 20 '18 at 8:14

|
show 3 more comments

I am trying to increase the width and height of the td cells as per my requirement.

Here is my code:

<div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><?php echo $this->remarksForm->remarkType; ?></td>

                <td><?php echo $this->remarksForm->remark; ?></td>

                <td>

                    <?php  echo $this->remarksForm->id;

                    echo $this->remarksForm->save; ?>

                </td>

            </tr>

        </tbody>

    </table>

</div>

Here is the result of what I have now:
enter image description here

Here is an image of the result what I would like to get:

enter image description here

How can I accomplish this?

Thanks in advance.

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

I believe Yesterday I saw this question, anyway now the button is not dropping, I suppose you should be using the textarea tag instead of input type="text", remove any height from styling to it. use vertical-align: top for all elements.

– vssadineni
Nov 20 '18 at 8:09

you mean for all td need to use vertical align:top

– suresh
Nov 20 '18 at 8:10

okay then what about the middle one how can increase the height of that td

– suresh
Nov 20 '18 at 8:12

They are usually middle aligned right. If you want them to be aligned to top then try it. I do not like to move elements with negative margins and transform, translate just for alignment.

– vssadineni
Nov 20 '18 at 8:13

so how can i increse it..is there a any other way

– suresh
Nov 20 '18 at 8:14

|
show 3 more comments

I am trying to increase the width and height of the td cells as per my requirement.

Here is my code:

<div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><?php echo $this->remarksForm->remarkType; ?></td>

                <td><?php echo $this->remarksForm->remark; ?></td>

                <td>

                    <?php  echo $this->remarksForm->id;

                    echo $this->remarksForm->save; ?>

                </td>

            </tr>

        </tbody>

    </table>

</div>

Here is the result of what I have now:
enter image description here

Here is an image of the result what I would like to get:

enter image description here

How can I accomplish this?

Thanks in advance.

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

I am trying to increase the width and height of the td cells as per my requirement.

Here is my code:

<div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><?php echo $this->remarksForm->remarkType; ?></td>

                <td><?php echo $this->remarksForm->remark; ?></td>

                <td>

                    <?php  echo $this->remarksForm->id;

                    echo $this->remarksForm->save; ?>

                </td>

            </tr>

        </tbody>

    </table>

</div>

Here is the result of what I have now:
enter image description here

Here is an image of the result what I would like to get:

enter image description here

How can I accomplish this?

Thanks in advance.

html css html-table

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

edited Nov 20 '18 at 8:11

waddupxnxxx

4311

asked Nov 20 '18 at 8:03

suresh

29410

asked Nov 20 '18 at 8:03

suresh

29410

asked Nov 20 '18 at 8:03

suresh

29410

I believe Yesterday I saw this question, anyway now the button is not dropping, I suppose you should be using the textarea tag instead of input type="text", remove any height from styling to it. use vertical-align: top for all elements.

– vssadineni
Nov 20 '18 at 8:09

you mean for all td need to use vertical align:top

– suresh
Nov 20 '18 at 8:10

okay then what about the middle one how can increase the height of that td

– suresh
Nov 20 '18 at 8:12

They are usually middle aligned right. If you want them to be aligned to top then try it. I do not like to move elements with negative margins and transform, translate just for alignment.

– vssadineni
Nov 20 '18 at 8:13

so how can i increse it..is there a any other way

– suresh
Nov 20 '18 at 8:14

|
show 3 more comments

I believe Yesterday I saw this question, anyway now the button is not dropping, I suppose you should be using the textarea tag instead of input type="text", remove any height from styling to it. use vertical-align: top for all elements.

– vssadineni
Nov 20 '18 at 8:09

you mean for all td need to use vertical align:top

– suresh
Nov 20 '18 at 8:10

okay then what about the middle one how can increase the height of that td

– suresh
Nov 20 '18 at 8:12

They are usually middle aligned right. If you want them to be aligned to top then try it. I do not like to move elements with negative margins and transform, translate just for alignment.

– vssadineni
Nov 20 '18 at 8:13

so how can i increse it..is there a any other way

– suresh
Nov 20 '18 at 8:14

I believe Yesterday I saw this question, anyway now the button is not dropping, I suppose you should be using the textarea tag instead of input type="text", remove any height from styling to it. use vertical-align: top for all elements.

– vssadineni
Nov 20 '18 at 8:09

you mean for all td need to use vertical align:top

– suresh
Nov 20 '18 at 8:10

okay then what about the middle one how can increase the height of that td

– suresh
Nov 20 '18 at 8:12

They are usually middle aligned right. If you want them to be aligned to top then try it. I do not like to move elements with negative margins and transform, translate just for alignment.

– vssadineni
Nov 20 '18 at 8:13

so how can i increse it..is there a any other way

– suresh
Nov 20 '18 at 8:14

|
show 3 more comments

3 Answers
3

active

oldest

votes

here is an example :

    <div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><select><option>one</option><option>two</option></select></td>

                <td style="vertical-align:top;"><textarea></textarea></td>

                <td style="vertical-align:top;">

                   <button>thank you</button>

                </td>

            </tr>

        </tbody>

    </table>

</div>

reference image for the posters desired alignment for the above html.

answered Nov 20 '18 at 9:07

vssadineni

394210

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

add a comment |

You could just add this style:

height: 50px;

answered Nov 20 '18 at 8:13

Sam Walpole

788

no its coming down

– suresh
Nov 20 '18 at 8:14

add a comment |

 Please add width:

    <div class="margin-top-10">

    <table cellspacing='0' cellpadding='0'>

        <tbody>

            <tr>

                <td width="20%" style="vertical-align:top;">test</td>

                <td width="70%">test</td>

                <td width="10%">test</td>

            </tr>

        </tbody>

    </table>

</div>

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388604%2fincrease-width-and-height-of-td-cells-in-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

here is an example :

    <div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><select><option>one</option><option>two</option></select></td>

                <td style="vertical-align:top;"><textarea></textarea></td>

                <td style="vertical-align:top;">

                   <button>thank you</button>

                </td>

            </tr>

        </tbody>

    </table>

</div>

reference image for the posters desired alignment for the above html.

answered Nov 20 '18 at 9:07

vssadineni

394210

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

add a comment |

here is an example :

    <div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><select><option>one</option><option>two</option></select></td>

                <td style="vertical-align:top;"><textarea></textarea></td>

                <td style="vertical-align:top;">

                   <button>thank you</button>

                </td>

            </tr>

        </tbody>

    </table>

</div>

reference image for the posters desired alignment for the above html.

answered Nov 20 '18 at 9:07

vssadineni

394210

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

add a comment |

here is an example :

    <div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><select><option>one</option><option>two</option></select></td>

                <td style="vertical-align:top;"><textarea></textarea></td>

                <td style="vertical-align:top;">

                   <button>thank you</button>

                </td>

            </tr>

        </tbody>

    </table>

</div>

reference image for the posters desired alignment for the above html.

answered Nov 20 '18 at 9:07

vssadineni

394210

here is an example :

    <div class="margin-top-10">

    <table>

        <tbody>

            <tr>

                <td style="vertical-align:top;"><select><option>one</option><option>two</option></select></td>

                <td style="vertical-align:top;"><textarea></textarea></td>

                <td style="vertical-align:top;">

                   <button>thank you</button>

                </td>

            </tr>

        </tbody>

    </table>

</div>

reference image for the posters desired alignment for the above html.

answered Nov 20 '18 at 9:07

vssadineni

394210

answered Nov 20 '18 at 9:07

vssadineni

394210

answered Nov 20 '18 at 9:07

vssadineni

394210

answered Nov 20 '18 at 9:07

vssadineni

394210

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

add a comment |

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

but mine is not textarea its not textbox

– suresh
Nov 20 '18 at 9:07

if i use text area the text box coming too big and add button goes off from div

– suresh
Nov 20 '18 at 9:08

Its table and I do not know what suits best in the situation textarea or input type text but if it is too big then please check corresponding styling upon the element like widths or size as you are trying to use php you might have different options by default try with bear minimum code and compare the output html's you will find the solution.

– vssadineni
Nov 20 '18 at 9:13

somehow its working i changes it to textaea and added rows and cols

– suresh
Nov 20 '18 at 9:17

add a comment |

You could just add this style:

height: 50px;

answered Nov 20 '18 at 8:13

Sam Walpole

788

no its coming down

– suresh
Nov 20 '18 at 8:14

add a comment |

You could just add this style:

height: 50px;

answered Nov 20 '18 at 8:13

Sam Walpole

788

no its coming down

– suresh
Nov 20 '18 at 8:14

add a comment |

You could just add this style:

height: 50px;

answered Nov 20 '18 at 8:13

Sam Walpole

788

You could just add this style:

height: 50px;

answered Nov 20 '18 at 8:13

Sam Walpole

788

answered Nov 20 '18 at 8:13

Sam Walpole

788

answered Nov 20 '18 at 8:13

Sam Walpole

788

answered Nov 20 '18 at 8:13

Sam Walpole

788

no its coming down

– suresh
Nov 20 '18 at 8:14

add a comment |

no its coming down

– suresh
Nov 20 '18 at 8:14

no its coming down

– suresh
Nov 20 '18 at 8:14

add a comment |

 Please add width:

    <div class="margin-top-10">

    <table cellspacing='0' cellpadding='0'>

        <tbody>

            <tr>

                <td width="20%" style="vertical-align:top;">test</td>

                <td width="70%">test</td>

                <td width="10%">test</td>

            </tr>

        </tbody>

    </table>

</div>

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

add a comment |

 Please add width:

    <div class="margin-top-10">

    <table cellspacing='0' cellpadding='0'>

        <tbody>

            <tr>

                <td width="20%" style="vertical-align:top;">test</td>

                <td width="70%">test</td>

                <td width="10%">test</td>

            </tr>

        </tbody>

    </table>

</div>

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

add a comment |

 Please add width:

    <div class="margin-top-10">

    <table cellspacing='0' cellpadding='0'>

        <tbody>

            <tr>

                <td width="20%" style="vertical-align:top;">test</td>

                <td width="70%">test</td>

                <td width="10%">test</td>

            </tr>

        </tbody>

    </table>

</div>

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

 Please add width:

    <div class="margin-top-10">

    <table cellspacing='0' cellpadding='0'>

        <tbody>

            <tr>

                <td width="20%" style="vertical-align:top;">test</td>

                <td width="70%">test</td>

                <td width="10%">test</td>

            </tr>

        </tbody>

    </table>

</div>

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

answered Nov 20 '18 at 8:14

Tushar Kumawat

360310

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

add a comment |

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

width is not working in my case

– suresh
Nov 20 '18 at 8:15

So I think your inner element taking width so please can you share URL.

– Tushar Kumawat
Nov 20 '18 at 8:19

its in local so sorry i cant give you link

– suresh
Nov 20 '18 at 8:49

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky