td の幅の関係で表示できなかった部分を、右隣のtdにはみ出させたい

tableの
tdの中に表示されているデータをそのtdの幅からはみ出させて右隣のtdに表示させたいと考えています。

lang
1<table>
2  <tr>
3     <td id="td1">abcdefghijk</td>   
4     <td id="td2"></td>             
5  </tr>
6</table>

例えば、上記のtd1の幅上、abcdefまで表示されたとすると、表示し切れなかったghijkが右隣のtd2にはみ出て欲しいということです。

そこで、CSSには、下記の記述をしていますが、折りたたまれて表示されるようになってしまいます。

lang
1overflow: visible;

なお、使っているライブラリの都合上、colspanを使ってtdを結合することはできません。

どうしたらよいか、お分かりの方、ご教示頂ければ幸いです。
よろしくお願い致します。

行動規範の内容に同意します

回答2件

tableとtdにwidthが設定されているという前提で

<table style="table-layout: fixed;"> でいかがでしょうか？

投稿2015/04/12 23:07

kiri

総合スコア74

退会済みユーザー

2015/04/13 03:44

ご回答頂き、ありがとうございます。 <table style="table-layout: fixed;"> で設定しましたが、うまくいきませんでした。

kiri

2015/04/13 03:47

ブラウザは何を使用していますか？あと、table td1 td2 にあてているCSSも教えていただきたいです。

退会済みユーザー

2015/04/13 04:22

ブラウザはchromeを使用しています。試しに、IEも試してみましたが、同じでした。なお、元々bootstrapや他のjsライブラリを使っていましたが、それらが邪魔しているといけないと思って、一時的に全て切っていますが、状況に変わりありません。 table td1にあてているCSSは、下記のものです。・width:30 ・border:none ・text-align:right ・vertical-align:middle ・padding-left:0px ・padding-right:0px ・font-size:10px ・font-family:Meiryo td2にあてているCSSは次のものです。・vertical-align:middle ・padding-left:0px ・padding-right:0px ・font-size:10px ・font-family:Meiryo よろしくお願いしますm(__)m

kiri

2015/04/13 04:24

ご回答ありがとうございます。tableには何をあてていますか？

kiri

2015/04/13 04:44

私もchromeで確認していますが、下記で確認出来ております。 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <table style="border: solid 1px #000;table-layout: fixed;width:50px;"> <tr> <td id="td1" style="width:30px;">abcdefghijk</td> <td id="td2" style="width:20px;">あああ</td> </tr> </table> </body> </html>

kiri

2015/04/13 04:46

あ、ごめんなさい。意味を完全にはき違えてました。今までの全部無視してください。すみません。

行動規範の内容に同意します

普通なら多分できないと思いますが質問者様のおっしゃられるライブラリ次第では？
質問の状況だと隣（td2）には何も入ってませんが、入ってたらどういう動作をする想定なのですか？
colspanを使っちゃいけないライブラリってどんなんなのかな・・・

そもそも隣のセルにはみ出させる為に？結合するのがcolspanですので、根本的に想定が間違ってる気がします。
隣にもはみ出たりしたい場合はDIVでうまくやるもんだと思います。

投稿2015/04/12 16:04

landy77

総合スコア1614

退会済みユーザー

2015/04/13 03:50

ご回答頂き、ありがとうございます。使っているライブラリは、「fixed_midashi.js」というものです。 http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html tableの見出し（縦と横）を固定して、スクロール表示させるためのものです。このライブラリは、colspanが入っていると、うまく動いてくれないんです。このライブラリを使わずに、縦と横の見出しを固定する方法があれば良いのですが。

行動規範の内容に同意します

あなたの回答