CODEWITHSUNDEEP
htmlcss
Thæ
Thæ

Reputation: 57

Can the input take up as much space as needed?

enter image description here

 <table class="grid-view" rules="cols" id="MainContent_GridViewMüşteri" style="color:Black;background-color:White;border-color:#DEDFDE;border-width:1px;border-style:None;border-collapse:collapse;" cellspacing="0" cellpadding="4">
            <tbody><tr style="color:White;background-color:#333333;font-weight:bold;">
                <th scope="col">&nbsp;</th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$Ünvan')" style="color:White;">Ünvan</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$İsim')" style="color:White;">İsim</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$Soyisim')" style="color:White;">Soyisim</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$TelefonNo')" style="color:White;">TelefonNo</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$ePosta')" style="color:White;">ePosta</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Sort$GörüşmeZamanı')" style="color:White;">GörüşmeZamanı</a></th><th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
            </tr><tr style="background-color:#F7F7DE;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$0')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0507 424 53 35</td><td>&nbsp;</td><th scope="row">11/29/2021 1:37:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$0')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$0')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:White;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$1')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0507 494 53 35</td><td>&nbsp;</td><th scope="row">11/29/2021 1:37:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$1')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$1')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:#F7F7DE;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$2')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0507 494 56 35</td><td>&nbsp;</td><th scope="row">11/29/2021 1:37:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$2')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$2')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:White;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$3')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 155 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$3')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$3')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:#F7F7DE;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$4')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 255 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$4')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$4')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:White;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$5')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 505 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$5')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$5')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:#F7F7DE;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$6')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 515 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$6')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$6')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:White;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$7')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 525 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$7')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$7')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:#F7F7DE;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$8')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 550 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$8')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$8')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:White;">
                <td><a class="btn btn-info" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Select$9')" style="color:Black;font-weight:bold;">Seç</a></td><td>Dr.</td><td>Osman</td><td>Baykuş</td><td>0555 551 55 55</td><td>&nbsp;</td><th scope="row">12/18/2021 2:52:00 AM</th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Edit$9')" style="color:Black;font-weight:bold;">Düzenle</a></td><td><a class="btn btn-danger" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Delete$9')" style="color:Black;font-weight:bold;">Sil</a></td>
            </tr><tr style="background-color:#F7F7DE;">
                <td></td><td><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl00" type="text" value="Prof." title="Ünvan"></td><td><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl01" type="text" value="Osmann" title="İsim"></td><td><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl02" type="text" value="Baykuşş" title="Soyisim"></td><td><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl03" type="text" value="0555 555 55 99" title="TelefonNo"></td><td><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl04" type="text" value="[email protected]" title="ePosta"></td><th scope="row"><input name="ctl00$MainContent$GridViewMüşteri$ctl12$ctl05" type="text" value="12/18/2021 2:52:00 AM" title="GörüşmeZamanı"></th><td><a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri$ctl12$ctl06','')" style="color:Black;font-weight:bold;">Güncelle</a>&nbsp;<a class="btn btn-warning" href="javascript:__doPostBack('ctl00$MainContent$GridViewMüşteri','Cancel$10')" style="color:Black;font-weight:bold;">Vazgeç</a></td><td></td>
            </tr>
        </tbody></table>

In this code, some columns have larger width, for example Ünvan, İsim Soyisim TelelfonNo. I wanna this th, td and inputs should take just enough space according to max length of them. Also, this is a gridview, when I use update button that I named Düzenle it's getting this shape. When I just change input's width, just they are narrowed down but columns don't. When I change th and td tag together, it has narrowed down.

Upvotes: 3

Views: 79

Answers (1)

Indigo Softwares
Indigo Softwares

Reputation: 9

Add following to the of the object you want to adjust:

<table style="width=fit-content; height=fit-content;">
</table>

Upvotes: 2

Related Questions