テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい

2023/08/10 05:28

このQ&Aのポイント

テーブルの枠線とテキストフィールドの縦、横の隙間をなくす方法をご教示ください。
テーブルの枠線とテキストフィールドの縦、横の隙間をピッチリとくっつける方法を教えてください。
テーブルの枠線とテキストフィールドの縦、横の隙間をなくすための修正方法をお知りの方はいますか？

ベストアンサー

テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい

2010/07/06 16:02

テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたいテーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたいです。コードを掲示しますのでご存知の方はどなたか修正願います <body> <table width="900" border="1" style="height:25px;"> <tr> <td rowspan="2" width="400"> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム（株）" style="height:25px;"/> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/> </td> <td width="60"style="height:12px;">実施日</td> <td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td> <tr> <td height="19" style="height:12px;">CODE</td> <td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td> </tr> </table> </body>

tkwavek
お礼率11% (103/930)

HTML
回答数2
ありがとう数15

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Java-Java
ベストアンサー率41% (14/34)

2010/07/08 11:58 回答No.2

どの部分の隙間なのかわからないのですが、boderをくっつけたいと言うことでしょうか？ HTMLであれば<table>に「cellpadding="0" cellspacing="0"」を付けます。 CSSであれば<table>に「style="border-collapse:collapse;"」を付けます。 HTMLの場合は、これだと1+1の2pxの枠がつきます。 HTMLで1pxの枠にしたい場合は、 <table cellpadding="0" cellspacing="1" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF">　</td> <td bgcolor="#FFFFFF">　</td> </tr> <tr> <td bgcolor="#FFFFFF">　</td> <td bgcolor="#FFFFFF">　</td> </tr> </table> とやるとできます。

その他の回答 (1)

hashiku
ベストアンサー率43% (7/16)

2010/07/06 22:54 回答No.1

tdなどの要素には、内側の余白を指定する「padding」プロパティがあります。ちなみに、外側の余白は「margin」です。 <style type="text/css"> td { padding: 0px; } </style> か <td style="padding: 0px;"> でどうぞ。

関連するQ&A

テーブルの枠線
IEブラウザのバージョンにより、表示が変わることはわかっているのですがどうしても解決できないので質問させていただきます。対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。きれいに表示できました。が、IE11で表示したら、見出しは枠線が表示されました。でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。以下にソースコードを記載しますのでよろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non">　</td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>
- ベストアンサー
- CSS
テーブル内に隙間が。
テーブル内に隙間が。質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。これを無くすにはどうすればいいのでしょうか。（html/cssの書き直さなくてはならない箇所はどこでしょうか）高さは左右のセルとも300に合わせているのですが…。どなたかご教授願います。  <style TYPE="text/css">  </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> no content </td></tr> </table>
- ベストアンサー
- ホームページ作成ソフト
テーブルの中にiframe
テーブルの中にiframeをしているのですがどうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると縦スクロールバーが表示されますがそれも右側にはみ出ます。どうにか800pxの中に収まらないものでしょうか？また、ボタンのボーダを下記ソースでは消していますがデフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }
- ベストアンサー
- HTML
テーブルの隙間をなくす
テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td>　<TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">　　</TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2">　</TD> </TR> </TBODY> </TABLE> </td> </tr> </table>
- ベストアンサー
- HTML
テーブルの中の文字を縦に表示する方法
テーブルの中の文字を縦に表示する方法はありますか？今はわからないので、<br>で無理やり改行しています。もっとスマートな方法があれば教えてください。 <style type="text/css"> table { width: 50%; height: 20px; border: 2px #2b2b2b solid; } td { border: 2px #2b2b2b solid; } </style> <table> <tr> <td>よこ</td> <td>た<br>て</td> </tr> </table>
- 締切済み
- CSS
表の作成
いつもお世話になっています。下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick="">  </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick="">  </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？よろしくお願いいたします。
- ベストアンサー
- HTML
htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。何とかして縦2×横2に置き換えることはできないでしょうか？ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】ーーーーー｜　　86行目　　｜ーーーーー｜ーーーーー｜　　87行目　　｜ーーーーー｜　　96行目　 83行目　　｜　　88行目　　｜　　92行目｜　　97行目ーーーーー｜　　89行目　　｜ーーーーー｜【やりたいこと】ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ーーーーー｜　　86行目｜87行目　｜ーーーーー｜　　96行目　 83行目　　｜　　88行目｜89行目　｜　92行目　｜　　97行目ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
Javascriptで自動計算の合計の式でエラー
度々すみません。前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。色々調べてみたのですが、この現象の原因がよくわかりません。何かエラーがあるのでしょうか。お知恵を貸して頂けると嬉しいです。宜しくお願いします。＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'> </td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>
- ベストアンサー
- JavaScript
特定のテーブルのみ枠線の色を消したい
スタイルシートで他のテーブルの為に色を設定しているけど特定のテーブルのみ、枠線の色をすべて消したい場合は、どうすればよろしいでしょうか？ <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか？
- ベストアンサー
- CSS
selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更という感じにしたいのですが、可能でしょうか？可能であれば書き方を教えていただけると助かります。よろしくおねがいします。
- 締切済み
- JavaScript