ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   

表の作成

日時: 2006/08/16 16:50
識別: IDhiZ/l0vnvWo
名前: 斉藤
参照: https://work777.jog.buttobi.net/

こんにちは早速質問させていただきます。
罫線1で左右に表を作り右の表にはスクロールバーの表を入れたいんですが
入れると左の線とスクロールバーで作った下線との間に隙間があいてしまいます。隙間が開かないようにうまくつなげる方法はありませんかよろしくお願いします。

Re: 表の作成 ( No.1 )
日時: 2006/08/16 18:14
名前: oioiooi

題名:::スクロールバーa

2006/08/12 00:55 by 滝

という名前で投稿していて、
なぜか、題名:::保存
名前をwakameに変更したねえ。
https://aimix.jp/hpbbbs/patio/patio.cgi?mode=view&no=2757

あまり、おかしな事はしない方がいい。
心証悪いよ。
こんなことするから、一つ過去ログに落ちたし。


だいたいさあ、質問投げていて、それに回答が付かないのはなぜかを考えた方がいいのでないかい?。

内容コピペで、名前だけ変えても質問内容を変えないと回答は付かないよ。

一体、どの部分を言っているのか、いちいちやり取りするほど皆さん暇じゃないから。

**************************************

表の作成
日時: 2006/08/16 16:50
識別: IDhiZ/l0vnvWo
名前: 斉藤
参照: ttp://work777.jog.buttobi.net/


こんにちは早速質問させていただきます。
罫線1で左右に表を作り右の表にはスクロールバーの表を入れたいんですが
入れると左の線とスクロールバーで作った下線との間に隙間があいてしまいます。隙間が開かないようにうまくつなげる方法はありませんかよろしくお願いします。


**************************************
https://aimix.jp/hpbbbs/patio/patio.cgi?mode=view&no=2757
保存
日時: 2006/08/16 16:53
識別: IDhiZ/l0vnvWo
名前: wakame
Re: 表の作成 ( No.2 )
日時: 2006/08/19 22:56
名前: 斉藤
参照: https://work777.jog.buttobi.net/

質問の答えが変えてこなかったので過去のスレッドを消して新しいスレッドで名前を変えて書き込んでしまいました。
迷惑かけて申し訳ございませんでした。

質問のことですが左右の表を作って右の表にスクロールバーを入れてしまうとどうしてもスクロールバーの枠の部分だけ隙間ができてしまい文字の始まりが少しずれてしまいます。スクロールバーを入れた状態でしたの表のように隙間が開かないようにと文字始まりもしたの表のようにの2点を直したいんですけど可能でしょうか?
よろしくお願いします。
Re: 表の作成 ( No.3 )
日時: 2006/08/20 09:23
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

https://work777.jog.buttobi.net/ を拝見しましたが、セルに ")" とだけ書かれているため、何のための「表」だかわからず、塩梅の良いサンプルが作れません。
せめて想定されるテキストが書かれていれば、適切なマークアップができるのですが。

Re: 表の作成 ( No.4 )
日時: 2006/08/20 14:13
名前: 斉藤
参照: https://work777.jog.buttobi.net/

カズサツさんご回答ありがとうございます。
想定されテキストを書いておいたのでよろしくお願いします。
Re: 表の作成 ( No.5 )
日時: 2006/08/21 11:22
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
color: black;
background-color: white;
font-size: small;
}
table{
height: auto;
width: auto;
}
th{
font-weight: normal;
text-align: left;
}
td{
text-align: left;
}
hr{
visibility: hidden;
clear: both;
}
table.data{
border-collapse: separate;
border-spacing: 0px 2px;
width: 100%;
}
table.data th{
border-width: 1px 0px 1px 1px;
border-style: solid;
border-color: gray;
white-space: nowrap;
}
table.data td{
border-width: 1px 1px 1px 0px;
border-style: solid;
border-color: gray;
width: 100%;
position: relative;
left: -2px;
}
div#ranking{
width: 267px;
float: left;
}
div#news{
height: 100px;
width: 284px;
overflow: auto;
position: relative;
float: left;
}
</style>
</head>
<body>
<div id="ranking">
<table class="data">
<tbody>
<tr>
<th>・1位:</th><td>test</td>
</tr>
<tr>
<th>・2位:</th><td>test</td>
</tr>
<tr>
<th>・3位:</th><td>test</td>
</tr>
<tr>
<th>・4位:</th><td>test</td>
</tr>
<tr>
<th>・5位:</th><td>test</td>
</tr>
</tbody>
</table>
</div>
<div id="news">
<table class="data">
<tbody>
<tr>
<th>・8/19:</th><td>中日山本昌が35勝、星野氏らに並ぶ</td>
</tr>
<tr>
<th>・8/19:</th><td>竜に11連敗、巨人原たたきつけた</td>
</tr>
<tr>
<th>・8/19:</th><td>涌井11勝、西武2000勝で首位</td>
</tr>
<tr>
<th>・8/19:</th><td>阪神福原4失点で自ら救う</td>
</tr>
<tr>
<th>・8/19:</th><td>西武−ソフトバンク/試合経過</td>
</tr>
</tbody>
</table>
</div>
<hr>
</body>
</html>
Re: 表の作成 ( No.6 )
日時: 2006/08/24 00:33
名前: 斉藤
参照: https://work777.jog.buttobi.net/

カズサツさん回答ありがとうございます。
大変参考になりました。でも左の表と右(スクロールバー付き)の表の間の隙間とスクロールバーの表のスクロールバーと表の間の隙間が大きすぎる(2mmくらい)ように感じます。ここの隙間最短にするにはどうしたらよいでしょうか?
よろしくお願いします。
Re: 表の作成 ( No.7 )
日時: 2006/08/24 09:52
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

div#ranking{
width: 267px;
float: left;
}



div#ranking{
width: 265px; /* ここの数値を適当に修正するとよろし */
float: left;
overflow: hidden;
}
div#ranking table{
width: 267px;
}
Re: 表の作成 ( No.8 )
日時: 2006/08/25 15:49
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

訂正
基本的に Opera / Firefox など、CSSをより正しく解釈するブラウザのため構築し、
IE のバグについて Conditional Comments で対応した

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
body{
color: black;
background-color: white;
font-size: small;
}
table{
height: auto;
width: auto;
}
th{
font-weight: normal;
text-align: left;
}
td{
text-align: left;
}
hr{
visibility: hidden;
clear: both;
}
table.data{
border-collapse: separate;
width: 100%;
border-spacing: 0px 2px;
}
table.data th{
border-width: 1px 0px 1px 1px;
border-style: solid;
border-color: gray;
white-space: nowrap;
padding: 1px;
line-height: 1;
}
table.data td{
border-width: 1px 1px 1px 0px;
border-style: solid;
border-color: gray;
width: 100%;
padding: 1px;
line-height: 1;
}
div#ranking{
width: 267px;
float: left;
}
div#news{
height: 95px;
width: 288px;
overflow: auto;
position: relative;
float: left;
margin-left: 2px; /* ここの数値を適当に修正するとよろし */
}
</style>
<!-- IE 5以降のみコメントとして認識しない Conditional Comments -->
<!--[if gte IE 5]>
<style type="text/css">
table.data th{
position: relative;
left: -2px;
}
table.data td{
position: relative;
left: -4px;
}
div.section{
overflow: hidden;
}
div#ranking table{
width: 273px;
}
div#news table{
width: 270px;
}
</style>
<![endif]-->
</head>
<body>
<div id="ranking" class="section">
<table class="data" cellpadding="1">
<tbody>
<tr>
<th>・1位:</th><td>test</td>
</tr>
<tr>
<th>・2位:</th><td>test</td>
</tr>
<tr>
<th>・3位:</th><td>test</td>
</tr>
<tr>
<th>・4位:</th><td>test</td>
</tr>
<tr>
<th>・5位:</th><td>test</td>
</tr>
</tbody>
</table>
</div>
<div id="news" class="section">
<table class="data" cellpadding="1">
<tbody>
<tr>
<th>・8/19:</th><td>中日山本昌が35勝、星野氏らに並ぶ</td>
</tr>
<tr>
<th>・8/19:</th><td>竜に11連敗、巨人原たたきつけた</td>
</tr>
<tr>
<th>・8/19:</th><td>涌井11勝、西武2000勝で首位</td>
</tr>
<tr>
<th>・8/19:</th><td>阪神福原4失点で自ら救う</td>
</tr>
<tr>
<th>・8/19:</th><td>西武−ソフトバンク/試合経過</td>
</tr>
<tr>
<th>・8/19:</th><td>test</td>
</tr>
</tbody>
</table>
</div>
<hr>
</body>
</html>

Re: 表の作成 ( No.9 )
日時: 2006/08/26 19:24
名前: 斉藤
参照: https://work777.jog.buttobi.net/

カヅサツさんありがとうございます。
今回作った表を2列の表の右側に入れ中央揃えしたんですけどどうしても左側によってしまいます。どうしてでしょうか?表のスクロールバーと表の間の隙間も小さくする方法も教えてください。
何度も申し訳ございませんがよろしくお願いします。
Re: 表の作成 ( No.10 )
日時: 2006/08/26 22:26
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

> 今回作った表を2列の表の右側に入れ中央揃えしたんですけどどうしても左側によってしまいます。どうしてでしょうか?

そのような作り方を想定していないからです。最初から言っていただければ、そのように構築したのですが。
また、想定されるテキストが書かれてないと適切なマークアップができないというのをどうもご理解いただけないようです。
Re: 表の作成 ( No.11 )
日時: 2006/08/26 22:26
名前: カヅサツ
参照: https://kadu.vis.ne.jp/main/

https://members.jcom.home.ne.jp/jintrick/Personal/markup.html
https://www.asahi-net.or.jp/~sd5a-ucd/www/
https://www.kanzaki.com/docs/htminfo.html
https://members.jcom.home.ne.jp/pctips/
Re: 表の作成 ( No.12 )
日時: 2006/08/26 23:09
名前: 斉藤
参照: https://work777.jog.buttobi.net/

カズサツさんありがとうぞざいます。
1から勉強しなおします。

ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved