tableデザイン

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%;
}
YAM.lab
  • YAM.lab

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です