Tekil Mesaj gösterimi - Html / CSS Kod Oluşturdum Mail CSS Desklemiyor Ne Yapılabilir?

Konu Html / CSS Kod Oluşturdum Mail CSS Desklemiyor Ne Yapılabilir?

31-05-2023, 15:48:19

#1

esimsek

Merhabalar ben html css kullanarak tablo çıktı formu oluşturdum fakat modül üzerinden maile düştüğünde tablo bozuk duruyor css desteklemiyor emailde gelen kutusunda düzgün bir şekilde kodların çalışması için ne yapabilirim?
Kod önizleyici editörde kodu çalıştırdığımda düzgün herhangi bir sorun görünmüyor lütfen yardımcı olurmusunuz? Kod içeriğini de buraya ekliyorum...
Kod Çıktı Resmi:

Bu altta verdiğim görüntü ise mail tarafına düşmüş hali ama bu şekilde olmasını istemiyorum yukarıda bulunan halde çıktı olarak görünmesini istiyorum css sorunu oluyor mail üzerine düştüğünde...

<!DOCTYPE html>
<html>
<head>
<title></title>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">

<style type="text/css">

.arabatablo {
border-collapse: collapse;
font-family: 'PT Sans', sans-serif;
width:100%;
}

.arabatablo td, .arabatablo th {
border: 1px solid lavenderblush;
padding: 8px 12px;

}

.arabatablo th {

text-align: left;
background-color:tomato;
color:white;
}

.arabatablo tr:hover{
background-color: lavenderblush;
}

.arabatablo tr:nth-child(even){
background-color:floralwhite;
}

</style>
</head>
<body>

<table class="arabatablo">
<tr>
<th colspan="4"><center>Başvuru Pozisyonu</center></th>
</tr>
<tr>
<td>Başvuru Türü:</td>
<td>{element|id:4|Başvuru Türü}</td>

</tr>

<tr>
<td>Başvurulan Pozisyon:</td>
<td>{element|id:5|Başvurulan Pozisyon}</td>

</tr>
<tr>
<td>Ücret Beklentisi:</td>
<td>{element|id:18|Ücret Beklentiniz}</td>

</tr>

<tr>
<td>KVKK Bildirimi:</td>
<td>Başvuruda bulunan {element|id:22|Adınız } KVKK bildirimini okuyup onaylamıştır.</td>

</tr>
<tr>
<th colspan="4"><center>Kişisel Bilgiler</center></th>
</tr>
<tr>
<td>Ad Soyad: {element|id:22|Adınız }</td>
<td>Askerlik Durumunuz: {element|id:43|Askerlik Durumunuz}</td>

</tr>

<tr>
<td>Doğum Tarihi: {element|id:24|Doğum Tarihiniz}</td>
<td>Terhis Tarihi ve Yeri: {element|id:56|Terhis Tarihi ve Yeri}</td>

</tr>
<tr>
<td>Doğum Yeri: {element|id:28|Doğum Yeriniz}</td>
<td>Ehliyet: {element|id:47|Ehliyetiniz}</td>

</tr>

<tr>
<td>Cinsiyet: {element|id:32|Cinsiyetiniz}</td>
<td>Medeni Durumu: {element|id:48|Medeni Durumunuz}</td>

</tr>
<tr>
<td>Ev Telefonu: {element|id:33|Ev Telefonunuz}</td>
<td>Uyruğu: {element|id:49|Uyruğunuz}</td>

</tr>
<tr>
<td>Cep Telefonu: {element|id:37|Cep Telefonunuz}</td>
<td>Uyruk Diğer: {element|id:52|Diğer}</td>

</tr>

<tr>
<td>E-Posta Adresi: {element|id:38|E-Posta Adresiniz}</td>
<td>Mezuniyet: {element|id:57|Mezuniyetiniz}</td>

</tr>
<tr>
<td>Adres Bilgisi: {element|id:39|Adresiniz}</td>
<td>Yabancı Dil: {element|id:356|Yabancı Dil}</td>

</tr>
<tr>
<th colspan="4"><center>Kişisel Durum</center></th>
</tr>
<tr>
<td>Bedensel Engeli: {element|id:325|Bedensel Engeliniz Var mı?}</td>
<td>Boy: {element|id:340|Boyunuz}</td>

</tr>

<tr>
<td>Bedensel Engeli Var İse: {element|id:326|Bedensel Engeliniz}</td>
<td>Kilo: {element|id:341|Kilonuz}</td>

</tr>
<tr>
<td>Ameliyat Oldunuz mu?: {element|id:329|Ameliyat Oldunuz mu?}</td>
<td>Sabıka Kaydı: {element|id:345|Sabıka Kaydınız Var mı?}</td>

</tr>

<tr>
<td>Ameliyat Olmuş İse: {element|id:331|Ameliyat}</td>
<td>Sigara Kullanıyormu?: {element|id:346|Sigara Kullanıyor musunuz?}</td>

</tr>
<tr>
<td>Hastalığınız Var mı?: {element|id:334|Hastalığınız Var mı?}</td>
<td>Bir Kuruma Borcu Var Mı?: {element|id:348|Bir kuruma borcunuz varmı?}</td>

</tr>

<tr>
<td>Hastalığı Var İse: {element|id:336|Hastalığınız}</td>
<td>Emekli Olduğu Kuruluş Var İse: {element|id:352|Emekli Olunan Kuruluş}</td>
<tr>
<tr>
<th colspan="4"><center>Öğrenim Bilgileri</center></th>
</tr>
<tr>
<td>İlköğretim:</td>
<td>Okul: {element|id:104|} Bölüm: {element|id:105|} Derece: {element|id:107|} Başlama Tarihi: {element|id:109|} Bitiş Tarihi: {element|id:111|}</td>

</tr>

<tr>
<td>Lise:</td>
<td>Okul: {element|id:160|} Bölüm: {element|id:162|} Derece: {element|id:164|} Başlama Tarihi: {element|id:166|} Bitiş Tarihi: {element|id:168|}</td>

</tr>
<tr>
<td>Üniversite1:</td>
<td>Okul: {element|id:149|} Bölüm: {element|id:151|} Derece: {element|id:153|} Başlama Tarihi: {element|id:155|} Bitiş Tarihi: {element|id:157|}</td>

</tr>

<tr>
<td>Üniversite2:</td>
<td>Okul: {element|id:138|} Bölüm: {element|id:140|} Derece: {element|id:142|} Başlama Tarihi: {element|id:144|} Bitiş Tarihi: {element|id:146|}</td>

</tr>
<tr>
<td>Yüksek Lisans:</td>
<td>Okul: {element|id:127|} Bölüm: {element|id:129|} Derece: {element|id:131|} Başlama Tarihi: {element|id:133|} Bitiş Tarihi: {element|id:135|}</td>

</tr>

<tr>
<td>Yüksek Okul:</td>
<td>Okul: {element|id:116|} Bölüm: {element|id:118|} Derece: {element|id:120|} Başlama Tarihi: {element|id:122|} Bitiş Tarihi: {element|id:124|}</td>
<tr>

<th colspan="4"><center>İş Deneyimi</center></th>
</tr>
<tr>
<td colspan="4">Şirket: {element|id:260|} Departman: {element|id:261|} Pozisyon: {element|id:262|} Giriş Tarihi: {element|id:264|} Çıkış Tarihi: {element|id:266|} Görevi: {element|id:268|}</td>

</tr>

<tr>
<td colspan="4">Şirket: {element|id:284|} Departman: {element|id:286|} Pozisyon: {element|id:288|} Giriş Tarihi: {element|id:290|} Çıkış Tarihi: {element|id:292|} Görevi: {element|id:294|}</td>

</tr>
<tr>
<td colspan="4">Şirket: {element|id:271|} Departman: {element|id:273|} Pozisyon: {element|id:275|} Giriş Tarihi: {element|id:277|} Çıkış Tarihi: {element|id:279|} Görevi: {element|id:281|}</td>

</tr>
<tr>
<th colspan="4"><center>Referanslar</center></th>
</tr>
<tr>
<td>Adı Soyadı: {element|id:297|} İş Yeri: {element|id:299|} Pozisyon: {element|id:301|} Telefon: {element|id:303|}</td>
<td>Adı Soyadı: {element|id:311|} İş Yeri: {element|id:313|} Pozisyon: {element|id:315|} Telefon: {element|id:317|}</td>
</tr>
<td style="height: px;" colspan="4"><center><footer>© Copyright 2023 Ravanda Carpet. All rights reserved</footer></center></td>
</table>

</body>
</html>