tableデザインしました！
今回は請求書を作成してみました！
何故か、発行日と請求番号欄が入力できなくなってしまいました・・・。
ソースコード
---HTML-----
<div class="title-box">
<h1 class="title">請求書</h1>
</div>
<div class="no-box">
<input type="text" placeholder="発行日入力" style="text-align: right;">
<input type="text" placeholder="請求番号入力" style="text-align: right;">
<img src="" alt="logo">
<input type="text" placeholder="会社名入力"><br><br>
<input type="text" placeholder="郵便番号入力">
<input type="text" placeholder="住所入力"><br><br>
<input type="text" placeholder="電話番号入力">
<input type="text" placeholder="fax番号入力">
</div>
<div class="client">
<input type="text" placeholder="郵便番号入力">
<input type="text" placeholder="住所入力">
<br>
<input type="text" placeholder="会社名入力">
<p class="ontyu">御中</p>
</div>
<div class="subject-box">
<legal>件名：<input type="text" placeholder="件名入力"></label>
<p>下記の通りご請求申し上げます。</p>
<h4 class="total-monay">ご請求金額<input type="text" placeholder="合計金額入力" style="text-align: right;"></h4>
<legal>支払期限：<input type="text" placeholder="期限入力"></label>
</div>
<div class="inner">
<table class="item">
<tr>
<th class="item1">品番・品名</th><th class="item2">数量</th><th class="item3">単価</th><th class="item4">金額</th>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
<tr>
<td><textarea name="" rows="1" cols=""></textarea></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>
</tr>
</table>
<div class="box">
<table class="total">
<tr>
<th class="item5">小計</th><td class="item6"><input type="text"></td>
</tr>
<tr>
<th class="item5">消費税</th><td class="item6"><input type="text"></td>
</tr>
<tr>
<th class="item5">合計</th><td class="item6"><input type="text"></td>
</tr>
</table>
</div>
<br>
<legal>お振込先：<input type="text" placeholder="振込先入力"></label>
</div>
---CSS-----
.title-box{
left: 70%;
width: 30%;
background-color: #696969;
}
.title{
text-align: center;
color: #fff;
}
.no-box{
left: 70%;
width: 30%;
}
.client{
top: -300px;
}
.ontyu{
left: 350px;
top: -30px;
font-size: 25px;
}
.total-monay{
width: 50%;
}
.subject-box{
width: 70%;
top: -200px;
}
.inner{
top: -150px;
}
table.item{
border: solid 1px #000;
border-collapse: collapse;/*重複線消込*/
width: 100%;
}
table.item th{
border-left: solid 1px #000;
border-bottom: solid 1px #000;
padding: 10px;
}
table.item tr{
border-bottom: solid 1px #000;
}
.item1{
width: 60%;
height: 100%;
}
.item2{
width: 10%;
height: 100%;
}
.item3{
width: 10%;
height: 100%;
}
.item4{
width: 20%;
height: 100%;
}
table.item td{
border-right: solid 1px #000;
border-left: solid 1px #000;
padding: 10px;
}
input[type="text"] {
padding: 2px 4px;
outline: 0;
border: 0px;
background: transparent;
font-size: 14px;
width: 100%;
}
input[type="number"] {
padding: 2px 4px;
outline: 0;
border: 0px;
background: transparent;
font-size: 14px;
width: 100%;
}
textarea{
padding: 2px 4px;
outline: 0;
border: 0px;
background: transparent;
font-size: 12px;
width: 100%;
}
table.total{
border-left: solid 1px #000;
border-right: : solid 1px #000;
border-bottom: : solid 1px #000;
border-collapse: collapse;/*重複線消込*/
width: 40%;
}
table.total th{
border-left: solid 1px #000;
border-bottom: solid 1px #000;
padding: 10px;
}
table.total td{
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
padding: 10px;
}
.box{
left: 60%;
}
.item5{
width: 20%;
height: 100%;
}
.item6{
width: 20%;
height: 100%;
}tableデザイン