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

添付画像のようなhtmlとcssのスマートな書き方※自作コード掲載

締切済

  • 質問者：39OK
  • 質問日時：
  • 回答数：2件

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<style>
.page {
background-color: rgb(234, 238, 14);
display: flex;
width: 100%;
height: 720px;
justify-content: center;
align-items: center;
}
nav {
margin: 10px px 10px 5px;
background-color: rgb(142, 224, 34);
width: 29%;
height: 700px;
}
main {
margin: 10px 5px 10px 0px;
background-color: rgb(226, 188, 204);
width: 69%;
height: 700px;
}
.main-search {
background-color: rgb(172, 221, 243);
width: 100%;
height: 250px;
overflow: scroll;
}
.main-search table{
width: auto !important;
}
.main-search th,td {
white-space: nowrap;
border: 1px solid #ccc;
height: 1em;
}
.main-search .th1{
background-color: rgb(87, 8, 233);
}
.main-list {
background-color: rgb(93, 57, 226);
width: 100%;
height: 450px;
overflow:scroll;
}
.main-list table{
width: auto !important;
}
.main-list th,td {
white-space: nowrap;
border: 1px solid #ccc;
height: 1.3em;
}
</style>
</head>
<body>
<section class="page">
<nav>Navigation</nav>
<main>
<div class="main-search">
検索条件入力欄
<table>
<tr>
<td class="th1">販社発注No</td>
<td><input type="text" size="7"/>～<input type="text" size="7"/></td>
<td class="th1">販社コード</td>
<td><input type="text" size="7"/><input type="button" value="参照"/></td>
<td class="th1">発注区分</td>
<td><select name="a"><option value="1">　　　　　　</option></select></td>
<td class="th1">確保区分</td>
<td><select name="b"><option value="1">　　　　　　</option></select></td>
</tr>
</table>
</div>
<div class="main-list">
一覧表示欄
<table>
<tr>
<th></th>
<th>希望出荷日</th>
<th>伝票日付</th>
<th>販社発注No</th>

<th>発注区分</th>
<th>販売会社</th>
<th>備考・納品先</th>
<th>行数</th>
<th>処理状態</th>
<th>物流状態</th>
<th>物流コメント</th>
<th>納品書発行</th>
<th>希望着日</th>
<th>発送日</th>
</tr>
<tr>
<td>表示</td>
<td>2007/07/01</td>
<td>19060707</td>
<td>出荷依頼</td>
<td></td>
<td></td>
<td>5</td>
<td>売上処理済み</td>
<td>発送完了</td>
<td>6/14手待ち</td>
<td></td>
<td>販社</td>
<td>2007/06/14</td>
<td>2007/06/15</td>
</tr>
</table>
</div>
</main>
</section>
</body>
</html>

「添付画像のようなhtmlとcssのスマー」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

CSSの定義部分は外部ファイルにしてincludeすればスッキリしますよ。

    • good
    • 0
    • 件
通報する

No.1

質問は何？

    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報