アプリ版：「スタンプのみでお礼する」機能のリリースについて

テーブルの枠自体を折り曲げる

解決済

  • 質問者：nastuno
  • 質問日時：
  • 回答数：8件

tableタグの事で質問です。
まずは画像をご覧になって欲しいのですが、横に長い表をブラウザの幅に合わせて画像のようにテーブルの枠自体を改行
したいのです。(テーブルの中の文字を改行するのではなく枠を
tableタグの事で質問です。
まずは画像をご覧になって欲しいのですが、横に長い表をブラウザの幅に合わせて画像のようにテーブルの枠自体を改行
したいのです。(テーブルの中の文字を改行するのではなく枠ごと改行したいのです。
表の中には自動でプログラムされた値が入るようになっているらしく、TRタグはつかえません。(普通だと折り曲げてはいけないそうですが)この横長の表をHPに掲載すると横のスクロールバーが出るのが嫌なのと
iframeで表示させねばならず、スペース的に画像であらわしいたように折り曲げたいのです。

http://oshiete.goo.ne.jp/qa/3312100.html ←このjavascriptが近いかと思うのですが、この例は１行の表の例なので
2行まとめて折り曲げる方法がわかりません。(javascriptがわかりません)

どなたか上記のように表現する方法をご存知ではないですか？大急ぎでお願いします。

「テーブルの枠自体を折り曲げる」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

そのHTMLはとっても酷いものです。

酷すぎて反吐が出そう・・
<br>の連続なんて考えられないし
<table>にsummaryがないし
いきなり<tr>だし、<body>は必須
bgcolor=とか、<center>なんか使いまくりですし・・・

　phpの呼び出し因数は、ソースを見ればわかると思います。それをそのまま、No.6で示したHTMLのdt内、dd内に並べ替えて入れると良いです。
　tableのデーターは行で一塊ですが、tableを折り曲げるためには、列でまとめなければなりません。それは、こつこつと手作業になりますが難しくはないでしょう。めんどくさいだけです。

この回答への補足

何度も本当に恐縮でございます。呼び出し因数？・・・この表にあてはまるのって、変動する文字とかなんです。さきほど自分で●●●●.php__QUERY__&wDate=__FullDate__&t=__t__">__IfOK1____Mark____IfOK2__</a>__IfOK2__とかをはめこんだりとかしてみたけどもできなくて、基本がわからなければ何もできないのだとがっかりしてしまいました・・・・orz

補足日時：2012/09/27 21:05
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当に沢山の案をご提示いただきまして有難う御座います。
結局解決にはいたりませんでしたが(私の力量不足)
大変勉強になりましたありがとうございます。

通報する
お礼日時：2012/09/30 09:25

No.7

  • 回答者： ORUKA1951
  • 回答日時：

ちょっと遊んでみました。


div.returnableData{
width:80%;margin:0 5% 0 15%;
line-height:2.8ex;
}
div.returnableData dl,div.returnableData sl dt,div.returnableData dl dd{
display:block;list-style:none;margin:0;padding:0;text-align:center;
}
div.returnableData dt{background-color:rgb(255,200,200);}
div.returnableData dd.symbole{background-color:rgb(255,225,225);}
div.returnableData dd.en{background-color:rgb(255,255,225);}
div.returnableData dl{float:left;margin:5px 0;position:relative;}
div.returnableData dl dt,div.returnableData dl dd{width:8em;padding:0.1em 0.3em;border:solid 1px gray;position:relative;z-index:100;}
div.returnableData dl:before{content:"元素名\A元素記号\A英語名";white-space:pre;position:absolute;top:-1px;left:-5em;text-align:right;line-height:3.4ex;}
div.footer{clear:left;}

IE8以降,Firefox,Opera,Sfari,Chromeの最新版でOK

この回答への補足

色々ありがとうございます。それでもできませんでした＞＜
以下がこの憎たらしいテーブルなのですが・・・↓

自動で値が入って横にびよーーーーんと伸びるタイプのものなのです。

このPHPの製作者の人には表の枠を折り曲げることはできません、したければ自分でやって下さいと言われました。
困ってしまってここでご相談にあがった次第です。

<html>
<head>
<title>__InstituteTitle____ReservationName__</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
</head>
<body bgcolor="__SBackground__" text="__STextColor__" link="__SLinkColor__" alink="__SALinkColor__" vlink="__SVLinkColor__">
__SHeader__


空きあり○　空き枠残り１枠△　空きなし×
<br>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
__WeekdayLoop__<td bgcolor="__DayColor__"><center>__IfOK1__<a href="●●●●.php__QUERY__&wDate=__FullDate__&t=__t__">__IfOK1____ThisDay____IfOK2__</a>__IfOK2__</center></td>
__WeekdayLoop__</tr>
<tr>
__WeekdayLoop__<td bgcolor="__DayColor__"><center>__IfOK1__<a href="●●●●.php__QUERY__&wDate=__FullDate__&t=__t__">__IfOK1____Mark____IfOK2__</a>__IfOK2__</center></td>
__WeekdayLoop__</tr>
</table>
<!--カレンダー-->
</form>
<br>
__IfSearch____ShowDate__(__Weekday__)の空き状況<br>
__IfSearch____IfResults____IfStylistTimeGrid__
<!-- 横スタイリスト・縦時刻のグリッド -->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td></td>
__StylistLoop__<td>__StylistName__</td>
__StylistLoop__</tr>

__TimesLoop__<tr>
<td>__Times__</td>
__EachStylistLoop__<td align="center">__IfOpen__<a href="__OpenLink__" target="_top">○</a>__IfOpen____IfClose__×__IfClose__</td>
__EachStylistLoop__</tr>
__TimesLoop__</table>
<!-- 横スタイリスト・縦時刻のグリッド -->

__IfStylistTimeGrid____IfTimeStylistGrid__
<!-- 横時刻・縦スタイリストのグリッド -->
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td></td>
__TimesLoop__<td>__Times__</td>
__TimesLoop__</tr>

__StylistLoop__<tr><td nowrap>__StylistName__</td>
__EachTimesLoop__<td align="center">__IfOpen__<a href="__OpenLink__" target="_top">○</a>__IfOpen____IfClose__×__IfClose__</td>
__EachTimesLoop__</tr>
__StylistLoop__</table>
<!-- 横時刻・縦スタイリストのグリッド -->

__IfTimeStylistGrid____IfResults____IfNoResults__この日は空き枠がございませんでした。他の日でお調べ下さい。<br>__IfNoResults__
__IfYouCan__

</body>
</html>

補足日時：2012/09/27 18:37
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当に沢山の案をご提示いただきまして有難う御座います。
結局解決にはいたりませんでしたが(私の力量不足)
大変勉強になりましたありがとうございます。

通報する
お礼日時：2012/09/30 09:25

No.6

  • 回答者： ORUKA1951
  • 回答日時：

SEO的に問題ないようにdlでマークアップした例です。


タブは＿に置換してあります。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
div.returnableData{
＿width:80%;margin:0 auto;
}
div.returnableData dl,div.returnableData sl dt,div.returnableData dl dd{
＿display:block;list-style:none;margin:0;padding:0;text-align:center;
}
div.returnableData dt{background-color:rgb(255,200,200);}
div.returnableData dd.symbole{background-color:rgb(255,225,225);}
div.returnableData dd.en{background-color:rgb(255,255,225);}
div.returnableData dl{float:left;margin:5px 0;}
div.returnableData dl dt,div.returnableData dl dd{width:8em;padding:0.1em 0.3em;border:solid 1px gray;z-index:100;position:relative;}
div.footer{clear:left;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿</div>
＿<div class="section">
＿＿<h2>元素</h2>
＿＿<div class="returnableData">
＿＿＿<dl>
＿＿＿＿<dt>水素</dt>
＿＿＿＿<dd class="symbole">H</dd>
＿＿＿＿<dd class="en">Hydrogen</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>ヘリウム</dt>
＿＿＿＿<dd class="symbole">He</dd>
＿＿＿＿<dd class="en">Helium</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>ベリリウム</dt>
＿＿＿＿<dd class="symbole">Be</dd>
＿＿＿＿<dd class="en">Beryllium</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>ホウ素</dt>
＿＿＿＿<dd class="symbole">B</dd>
＿＿＿＿<dd class="en">Boron</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>炭素</dt>
＿＿＿＿<dd class="symbole">C</dd>
＿＿＿＿<dd class="en">Carbon</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>窒素</dt>
＿＿＿＿<dd class="symbole">N</dd>
＿＿＿＿<dd class="en">Nitrogen</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>酸素</dt>
＿＿＿＿<dd class="symbole">O</dd>
＿＿＿＿<dd class="en">Oxygen</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>フッ素</dt>
＿＿＿＿<dd class="symbole">F</dd>
＿＿＿＿<dd class="en">Fluorine</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>ネオン</dt>
＿＿＿＿<dd class="symbole">Ne</dd>
＿＿＿＿<dd class="en">Neon</dd>
＿＿＿</dl>
＿＿＿<dl>
＿＿＿＿<dt>ナトリウム</dt>
＿＿＿＿<dd class="symbole">Na</dd>
＿＿＿＿<dd class="en">Sodium</dd>
＿＿＿</dl>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt>First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿＿<dt>Last Modified</dt>
＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

この回答への補足

理想にとてもちかかったのですが
あてはめるとぜきなかったです。　ＰＨＰで吐き出される値がテーブルタグのすきまなどにはいっていて
そのタグにあてはめようとしましたができませんでした
テーブルタグのままでどうにか見た目を折り曲げることは出来ないでしょうか。
とても勉強になりました。

補足日時：2012/09/27 15:53
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当に沢山の案をご提示いただきまして有難う御座います。
結局解決にはいたりませんでしたが(私の力量不足)
大変勉強になりましたありがとうございます。

通報する
お礼日時：2012/09/30 09:25

No.5

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



jQueryが必要ですので以下のようにしてください。
そうすればもとのHTMLはいじらなくてもテーブルの構成を変更することが出来ると思います。


<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jq …
<script type="text/javascript">
//省略
    • good
    • 0
    • 件
通報する
この回答へのお礼

JQUERYをどうやって使うのかがわからないのですが
それを貼り付けてみましたところ出来ませんでした
回答ありがとうございます。

通報する
お礼日時：2012/09/27 18:47

No.4

  • 回答者： taloo
  • 回答日時：

すみません、投稿直後に気づきました。



AA
BB
というのを

A
B
A
B

という並びにする方法はわかりません。
No.3のは

A
A
B
B

という並びです。（1行ずつ２段に表示します）
    • good
    • 0
    • 件
通報する
この回答へのお礼

いえいえ、回答ありがとうございました。

通報する
お礼日時：2012/09/27 13:04

No.3

  • 回答者： taloo
  • 回答日時：

ブラウザ依存度が高い（サポートしているブラウザが少ない）かもしれません。


widthはborderやpaddingに影響しますので適宜調整してください。


<style>
table{
width: 400px;
}
tr{
overflow: auto;
width: 400px;
display: block;
}
td{
float: left;
width:100px;
display: block;

}
</style>

<table>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
    • good
    • 0
    • 件
通報する
この回答へのお礼

上記の件了解しました。ご回答有難う御座います。

通報する
お礼日時：2012/09/27 18:47

No.2

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



JavaScript+jQueryを使って良い環境なら以下のようにすれば実現できると思います。
(JavaScriptが動作しない環境の人は動きません)

要望通り大急ぎで作ったので効率等は考えていません。

下記の場合「変身！」ボタンを選択するともとのテーブルが整形後に変更されます。
読み込み時に実行するようにするには削除A行と削除B行を削除すれば読み込み時に実行されます。


==== JavaScript
$().ready ( function() {
$('button').click ( function() { // 削除A
var $table = $('table');
var tdSize = $table.find('td').length / 2;
var tr1 = '<tr class="line0">';
var tr2 = '<tr class="line1">';
var html = '';
for ( var i = 0; i < tdSize; i ++ ) {
var $td1 = $table.find('tr:eq(0) td:eq(' + i + ')');
var $td2 = $table.find('tr:eq(1) td:eq(' + i + ')');
if ( i > 0 && i % 5 === 0 ) {
html += tr1 + '</tr>' + tr2 + '</tr>';
tr1 = '<tr class="line0">';
tr2 = '<tr class="line1">';
}
tr1 += '<td>' + $td1.html() + '</td>';
tr2 += '<td>' + $td2.html() + '</td>';
}
for ( i = 0; i < tdSize % 5-1; i ++ ) {
tr1 += '<td></td>';
tr2 += '<td></td>';
}
html += tr1 + '</tr>' + tr2 + '</tr>';
$('table').html ( $('<table/>').html ( html ) );
});//削除B
});
==== HTML
<table>
<tr class="line0">
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
<td>A-9</td>
<td>A-10</td>
</tr>
<tr class="line1">
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
<td>B-9</td>
<td>B-10</td>
</tr>
</table>
<button type="button">変身！</button>

この回答への補足

ここに書きたかったのですがお礼のところにいろいろ書いてしまいました。すみません。

補足日時：2012/09/27 13:18
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

<html>
<head>
<title></title>
<script type="text/javascript">
$().ready ( function() {
$('button').click ( function() { // 削除A
var $table = $('table');
var tdSize = $table.find('td').length / 2;
var tr1 = '<tr class="line0">';
var tr2 = '<tr class="line1">';
var html = '';
for ( var i = 0; i < tdSize; i ++ ) {
var $td1 = $table.find('tr:eq(0) td:eq(' + i + ')');
var $td2 = $table.find('tr:eq(1) td:eq(' + i + ')');
if ( i > 0 && i % 5 === 0 ) {
html += tr1 + '</tr>' + tr2 + '</tr>';
tr1 = '<tr class="line0">';
tr2 = '<tr class="line1">';
}
tr1 += '<td>' + $td1.html() + '</td>';
tr2 += '<td>' + $td2.html() + '</td>';
}
for ( i = 0; i < tdSize % 5-1; i ++ ) {
tr1 += '<td></td>';
tr2 += '<td></td>';
}
html += tr1 + '</tr>' + tr2 + '</tr>';
$('table').html ( $('<table/>').html ( html ) );
});//削除B
});
</script>
</head>

<table>
<tr class="line0">
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
<td>A-4</td>
<td>A-5</td>
<td>A-6</td>
<td>A-7</td>
<td>A-8</td>
<td>A-9</td>
<td>A-10</td>
</tr>
<tr class="line1">
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
<td>B-4</td>
<td>B-5</td>
<td>B-6</td>
<td>B-7</td>
<td>B-8</td>
<td>B-9</td>
<td>B-10</td>
</tr>
</table>
<button type="button">変身！</button>
</body>
</html>

このように書いてみましたが思うとおりにならなかったです。
何か間違っているのでしょうか。

丁寧なご回答まことにありがとうございます。

通報する
お礼日時：2012/09/27 13:04

No.1

  • 回答者： ORUKA1951
  • 回答日時：

結論から言うと不可能です。


表は、あくまで二次元データーで縦に並ぶ項目、横に並ぶ項目はそれぞれ関連があるものだからです。よって本来の方法はセルの横幅を固定せずに表全体を縦に伸ばす---セルが縦長になるようにすべきです。
　これは大原則です。スタイルシートでtable{width:100%;}とするしかない・・
★11 表 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　このデータを表でないものでマークアップすれば、よいでしょう。たとえば
<ul class="dta">
　<li>
　　　<ul>
　　　　　<li>なんたらかんたら</li>
　　　　　<li>データ</li>
　　　</ul>
　</li>
　<li>
　　　<ul>
　　　　　<li>なんたらかんたら</li>
　　　　　<li>データ</li>
　　　</ul>
　</li>
　<li>
　　　<ul>
　　　　　<li>なんたらかんたら</li>
　　　　　<li>データ</li>
　　　</ul>
　</li>
</ul>
とマークアップして、それぞれの項目をfloatで並べればよいでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ジャバスクリプトのＤＯＭとかいうものでできるようなことを検索にて
見つけましたが、それがわからない状態です。
回答ありがとうございます。

通報する
お礼日時：2012/09/27 13:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報