Membuat titik dua sejajar di php

Hallo selamat pagi teman2, gimana buat titik dua nya sejajar ya? tanpa mengatur nya satu persatu?
trimksi..

<p style="text-align:justify">Adapun data-data mengenai diri saya sbb :</p>
                    <br>
                      <td> Nama Lengkap</td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_nama']?></td> <br><br>
                      <td> Warga Negara</i></td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_warga_negara']?></td></br></br>
                      <td> Jenis Kelamin</i></td> 
                      <span style="padding-left:500px;"><td> : </td></span>
                      <td class="borderData" style="width:50%;text-align:left;vertical-align:top;"><?=$data['inp_jk']?></td></br></br>
image.pngimage.png
avatar novaje

@novaje

27 Kontribusi 3 Poin


Jawaban Terpilih

Coba seperti ini :
<style>
	table {
		width: 100%;
	}
  /* Mengatur width kolom pertama */
	table tr td:first-child {
		width: 120px;
	}
  /* Mengatur width kolom ke-2 */
	table tr td:nth-child (2) {
		width: 10px;
	}
</style>
<table>
	<tr>
		<td>Name</td>
		<td>:</td>
		<td>John Doe</td>
	</tr>
	<tr>
		<td>Dob</td>
		<td>:</td>
		<td>1999-02-22</td>
	</tr>
	<tr>
		<td>Country</td>
		<td>:</td>
		<td>United State of America</td>
	</tr>
	<tr>
		<td>Phone</td>
		<td>:</td>
		<td>+1 291892819</td>
	</tr>
</table>

Hasilnya bisa cek disini https://codepen.io/ahanafi/pen/BaVVbJG
avatar ahanafi

@ahanafi

813 Kontribusi 551 Poin

Jawaban

Untuk penampilan, semuanya berada di CSS.
Ada banyak cara mengatur text dan titik dua jadi sejajar.

1. Atur properti "width" dari label yang di seblah kiri. Bikin semua widthnya sama di CSS, untuk lable yang di sebelah kiri

2. Bungkus semua properti label di satu div yang sama, Titik dua div berikutnya, dan isi dari label di div berikutnya lagi. Tmapilkan dalam bentuk flex
avatar hilmanski

@hilmanski

2538 Kontribusi 2085 Poin

  • trimakasi banya mas hilman.. - @novaje


Coba seperti ini :
<style>
	table {
		width: 100%;
	}
  /* Mengatur width kolom pertama */
	table tr td:first-child {
		width: 120px;
	}
  /* Mengatur width kolom ke-2 */
	table tr td:nth-child (2) {
		width: 10px;
	}
</style>
<table>
	<tr>
		<td>Name</td>
		<td>:</td>
		<td>John Doe</td>
	</tr>
	<tr>
		<td>Dob</td>
		<td>:</td>
		<td>1999-02-22</td>
	</tr>
	<tr>
		<td>Country</td>
		<td>:</td>
		<td>United State of America</td>
	</tr>
	<tr>
		<td>Phone</td>
		<td>:</td>
		<td>+1 291892819</td>
	</tr>
</table>

Hasilnya bisa cek disini https://codepen.io/ahanafi/pen/BaVVbJG
avatar ahanafi

@ahanafi

813 Kontribusi 551 Poin

  • bisa bang.. trimkasi banya bg.. - @novaje


Login untuk gabung berdiskusi