مشکل border-radius و colspan

مشکل border-radius و colspan

با توجه به تجربه محور بودن نوشته‌های وبسایت ما، در این نوشته یکی از مشکلاتی که برای تیم ما به وجود آمده را بررسی می‌کنیم. اگر با css کار کنید یکی از propertyهایی که با آن حتما اشنا می‌شوید border-radius است. کار این خاصیت در css این است که المان مورد نظر شما در بخش لبه‌ها گرد می‌کند. مثلا اگر border-raidus یک مربع را 100درصد کنید آن مربع تبدیل به دایره می‌شود. در این نوشته به بررسی مشکل border-radius با خصیصه‌ی colspan که در html برای جدول‌ها استفاده می‌شود را بررسی می‌کنیم. خصیصه‌ی colspan در html متعلق به جدول‌ها است و کار آن این است که ستون‌های کنار هم را یکی می‌کند.

مشکل border-radius و colspan

ابتدا مشکل را طرح می‌کنیم؛ جدول زیر را نگاه کنید:

جدول بالا دارای خاصیت border-radius می باشد اما هیچ گرد شدنی در گوشه‌های مستطیل جدول در کار نیست؛ هم‌چنین دقت کنید که ردیف آخر این جدول سه ستون را به طور کل با خاصیت colspan ترکیب کرده است.

اما ما در نهایت باید نتیجه‌ی بالا را ببینیم؛ یعنی در واقع توقع داریم بعد از اعمال یک خاصیت border-radius نتیحه‌ی بالا به وجود بیاید. کد جدول بالا به شکل زیر است:

<table>
	<thead>
		<tr>
			<td width="10%">#</td>
			<td width="60%">head1</td>
			<td width="30%">head2</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td width="20%">1</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">2</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">3</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">4</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">5</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">6</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">7</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">8</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">9</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">10</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="100%" colspan="3">ColSpan</td>
		</tr>
	</tbody>
</table>

بعد از اعمال موارد بالا باید کد css خود را اضافه کنید:

table {
	border-radius: 10px !important;
	border-style: hidden;
	border-collapse: all;
	overflow: hidden;
	border: none;
}

خب اگر به قطعه کد بالا دقت کنید در کنار خاصیت border-radius ما از چهار ویژگی دیگر نیز استفاده کردیم. با کمک خاصیت border-style و border کادر دور جدول را از بین می‌بریم. با کمک خاصیت overflow اضافی عناصری که در محوطه‌ی جدول است را نمایش نمی‌دهیم.

اگر روش‌های بهتری برای گرد کردن اطراف یک جدول در css و عدم مشکل خوردن آن با colspan را دارید در بخش نظرات برای ما بنویسید.